/* =========================================================
   Aptekarz Warszawski – style3.css
   ========================================================= */

/* ---------- Reset ---------- */

*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

img {
   display: block;
   max-width: 100%;
   height: auto;
}

button {
   font: inherit;
   color: inherit;
   background: none;
   border: 0;
   cursor: pointer;
}

a {
   text-decoration: none;
   color: inherit;
}

/* ---------- Page ---------- */

html {
   height: 100%;
   overflow-x: clip;
}

body {
   min-height: 100%;
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 24px 0;
   overflow-x: clip;

   /* solid colour first so the whole canvas is orange,
      the gradient paints on top of it */
   background: #F79F00 linear-gradient(0deg, #F17F00, #F79F00 30%) no-repeat;

   font-family: 'Lato', Arial, Helvetica, sans-serif;
   font-weight: 400;
   font-size: 16px;
   line-height: 1.5;
   color: #1a1a1a;
}

/* ---------- Card ---------- */

#main_container {
   position: relative;
   width: min(984px, 100% - 32px);
   margin: auto;                   /* centres in any parent */
   padding: 0 0 100px 0;           /* room for the exlibris */
   background: #fff;
}

/* ---------- Hero (clipboard + badge + pen) ---------- */

.hero {
   position: relative;
   aspect-ratio: 984 / 330;
   margin-bottom: 32px;
}

.hero img {
   position: absolute;
}

.hero__logo {
   position: absolute;
   top: -13%;
   left: 30%;
   width: 51%;
   z-index: 2;
}

.hero__logo img {
   position: static;
   width: 100%;
}

.hero__badge {
   top: -14%;
   left: -8%;
   width: 48%;
   z-index: 3;
}

.hero__pen {
   top: 42%;
   right: -10%;
   width: 26%;
   z-index: 3;
}

/* ---------- Pharmacies ---------- */

#apteki {
   padding: 0 6% 0 20%;
   text-align: left;
}

.adres {
   padding-bottom: 24px;
}

.adres p {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   column-gap: 14px;
   row-gap: 2px;
}

.adres1 {
   font-weight: 700;
   font-size: 15px;
   padding-bottom: 2px;
}

.adres2,
.adres button {
   font-size: 14px;
}

/* small square separators */
.kwadrat-2::before,
.kwadrat-3::before {
   content: "";
   display: inline-block;
   width: 6px;
   height: 6px;
   background: #595959;
   margin-right: 8px;
   vertical-align: middle;
   position: relative;
   top: -2px;
}

.kwadrat-3::before {
   width: 4px;
   height: 4px;
}

/* pin + "zobacz na mapie" always stay together */
.mapa {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap;
}

.mapa img {
   display: inline-block;
}

.adres button {
   font-weight: 700;
   color: #009139;
   padding: 0;
}

.adres button:hover,
.adres button:focus-visible {
   text-decoration: underline;
   outline: none;
}

/* ---------- Buttons ---------- */

.przyciski {
   display: flex;
   flex-wrap: wrap;
   gap: 16px 40px;
   margin: 8px 6% 0 20%;
}

.btn {
   position: relative;
   display: flex;
   align-items: center;
   min-width: 272px;
   height: 62px;
   padding: 0 90px 0 50px;
   font-weight: 700;
   color: #fff;
}

.btn--czerwony { background: #e51522; }
.btn--zielony  { background: #009139; }

.btn:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px;
}

.arrow {
   position: absolute;
   top: 15px;
   right: 45px;
   width: 15px;
   height: 30px;
   pointer-events: none;
}

.arrow span,
.arrow::before,
.arrow::after {
   content: "";
   display: block;
   position: absolute;
   top: 17px;
   right: 0;
   height: 2px;
   background: #fff;
   transform-origin: right 50%;
}

.arrow span {
   width: 0;
   transition: width .3s, right .3s .05s;
}

.arrow::before,
.arrow::after {
   width: 14px;
   transition: right .3s .05s;
}

.arrow::before { transform: rotate(-45deg); }
.arrow::after  { transform: rotate(45deg);  }

.btn:hover .arrow span {
   width: 36px;
   right: -21px;
}

.btn:hover .arrow::before,
.btn:hover .arrow::after {
   right: -21px;
}

@media (prefers-reduced-motion: reduce) {
   .arrow span,
   .arrow::before,
   .arrow::after {
      transition: none;
   }
}

/* ---------- Exlibris ---------- */

.exlibris {
   position: absolute;
   right: 25px;
   bottom: 20px;
}

/* ---------- Map popups ---------- */

div[class*="popup-overlay"] {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 1000;
   background: rgba(0, 0, 0, .75);
   align-items: center;
   justify-content: center;
   padding: 16px;
}

div[class*="popup-overlay"].active {
   display: flex;
}

div[class*="popup-content"] {
   width: min(640px, 100%);
   background: #fff;
   padding: 12px;
}

div[class*="popup-content"] iframe {
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 4 / 3;
   border: 0;
}

div[class*="popup-overlay"] button.close {
   display: block;
   width: 100%;
   height: 35px;
   margin-top: 12px;
   background: #009139;
   color: #fff;
   font-weight: 700;
}

/* ---------- Breakpoints ---------- */

/* small phones: tighter hero, pen hidden, content full width */
@media (max-width: 599px) {
   #main_container {
      width: calc(100% - 24px);
      padding-bottom: 130px;
   }

   .hero {
      aspect-ratio: 320 / 120;
      margin-bottom: 24px;
   }

   .hero__logo {
      top: -8%;
      left: 34%;
      width: 55%;
   }

   .hero__badge {
      top: -2%;
      left: -2%;
      width: 40%;
   }

   .hero__pen {
      display: none;
   }

   #apteki {
      padding: 0 20px;
   }

   .przyciski {
      margin: 8px 20px 0;
   }

   .btn {
      width: 100%;
   }
}

/* tablet */
@media (min-width: 600px) and (max-width: 991px) {
   .hero {
      aspect-ratio: 658 / 300;
   }

   #apteki {
      padding: 0 8% 0 12%;
   }

   .przyciski {
      margin-left: 12%;
   }

   .adres1 {
      font-size: 16px;
   }
}

/* desktop */
@media (min-width: 992px) {
   .adres1 {
      font-size: 18px;
   }
}