/* =====================================================================
   SITE FOOTER — rebuilt 1:1 from the Figma frame
   "Dverko | Category page - Detail" (docs/design/category_page_all).

   Geometry below is measured off that 1920px-wide frame, whose content
   column is the same 1600px (--layout-max) used everywhere else, so the
   x positions map straight onto .container:

     panel          full-bleed 0..1920, 24px radius on the top corners only
     panel top      y 5825, first content row (logo) y 5889  -> 64px padding
     columns        x 160 / 904 / 1151 / 1530   (container starts at x 160)
     column widths  744 / 247 / 379 / 230       (of the 1600px column)
     link rhythm    36px pitch (16px text on a 20px line + 8px padding)
     divider        y 6297, one hairline of white at ~26% over the sage
     bottom row     copyright left, payment marks centred, cookies right

   This file is loaded after app.css and storefront-export.css and owns the
   footer outright: the markup no longer exposes `.site-footer > .container`,
   so the older inset-panel rules in those two files no longer match.
   ===================================================================== */

.site-footer {
  margin-top: 64px;
  padding: 0;
  background: transparent;
  color: var(--color-ink);

  /*
    The newsletter block's width and the mascot's size are one problem, not
    two: the mascot stands in the gap between this fixed-width block and the
    first link list, so both are declared here and the mascot's `left` is
    derived from the width below. Change the width and the mascot follows.
  */
  --footer-newsletter-width: 340px;
  /*
    Fluid so the mascot always fits its slot instead of being switched off.

    Its slot is the gap between this block and the first link list, and the
    link column is 744fr of the content column, so the slot grows about 0.54px
    per px of viewport while the bird is ~0.775x as wide as it is tall. That
    puts the usable ramp at ~68vw, offset so ~22px of air survives at the
    1400px cut-off; it tops out at 320px, a step up on request (was 300), and
    the cap is reached by ~1550px, so a 1920 screen at 125% Windows scaling
    (a 1536px viewport) already gets the full size.
  */
  --footer-mascot-height: clamp(200px, 68vw - 735px, 320px);
}

/* ---- The panel itself: full-bleed, clipped so the arcs stop at its edge ---- */
.site-footer__panel {
  position: relative;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(90deg, var(--color-green-500) 0%, var(--color-green-400) 100%);
}

/*
 * Decorative arcs. Two near-identical circles (r 609 / 604, both centred on
 * y 601 relative to the panel top) whose visible edges meet in a soft "V"
 * under the newsletter column. Radii and centres were fitted to the arc
 * pixels sampled out of the frame, so the sweep matches the design rather
 * than approximating it. They are anchored to .site-footer__inner, i.e. to
 * the 1600px content column, so they keep their relationship to the copy at
 * any viewport width instead of drifting with the full-bleed panel.
 */
.site-footer__inner::before,
.site-footer__inner::after {
  content: '';
  position: absolute;
  z-index: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  pointer-events: none;
}

.site-footer__inner::before {
  width: 1219px;
  height: 1219px;
  left: -906px;
  top: -6px;
}

.site-footer__inner::after {
  width: 1207px;
  height: 1207px;
  left: 285px;
  top: -5px;
}

/* ---- Content column ---- */
.site-footer__inner {
  position: relative;
  padding-top: 64px;
  padding-bottom: 66px;
}

.site-footer__grid {
  position: relative;
  z-index: 2;
  display: grid;
  /*
    744 / 247 / 379 / 230 of the 1600px column, as fr so the ratio holds at any
    width. The contact column carries a floor: below ~215px the advisor pills
    can no longer hold "Odpovíme do 24 hodin" and the label breaks out of the
    rounded edge, so that column stops shrinking and the other three give way.
  */
  grid-template-columns:
    minmax(0, 744fr)
    minmax(0, 247fr)
    minmax(0, 379fr)
    minmax(215px, 230fr);
  align-items: start;
}

/* ---- Mascot: between the newsletter column and the link lists, standing on
   the divider rule.

   The frame puts "maskot_smiech" at left 514px, 362x362, bottom-anchored, so
   its beak clears the 360px newsletter column (which ends at x 520) by ~36px.
   A percentage cannot hold that relationship - the newsletter block is a fixed
   380px while a percentage shrinks with the page - which is how `left: 23.6%`
   (495px at 1920, ~19px left of the frame) ended up putting the beak 16px from
   the e-mail field. The mascot is anchored to the newsletter column instead,
   with a fixed 32px of air:

     left = --page-gutter + 380px (newsletter) + 32px (air) - transparent edge

   The PNG carries ~11.7% of its height as transparent padding down its left
   side, so that share is subtracted to land the *bird* 32px out, not the box.
   Height tops out at 300px, a step under the frame, as requested, and shrinks
   with the page (see --footer-mascot-height) so it keeps fitting its slot
   rather than being hidden. ---- */
.site-footer__mascot {
  position: absolute;
  left: calc(
    var(--page-gutter) + var(--footer-newsletter-width) + 32px
    - 0.1173 * var(--footer-mascot-height)
  );
  bottom: 0;
  z-index: 1;
  height: var(--footer-mascot-height);
  width: auto;
  pointer-events: none;
}

/* ---- Column 1: wordmark, tagline, newsletter ---- */
.site-footer__logo {
  display: block;
  height: 36px;
  width: auto;
  margin: 0;
}

.site-footer__tagline {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-ink);
}

/* The whole block is stepped down from the frame's 360px column on request;
   --footer-newsletter-width is its outer width and also anchors the mascot.
   The input sits inside it, the consent line uses the full width so it still
   holds one line as it does in the frame. */
.site-footer__newsletter { margin-top: 44px; max-width: var(--footer-newsletter-width); }

.site-footer__newsletter-title {
  margin: 0 0 11px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.site-footer__newsletter-input {
  display: block;
  width: 100%;
  max-width: 330px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: var(--color-white, #fff);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 14.5px;
}

.site-footer__newsletter-input::placeholder { color: #9f9f9f; }

.site-footer__newsletter-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.site-footer__newsletter-note {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: rgba(32, 35, 28, 0.78);
}

.site-footer__newsletter-note a {
  display: inline;
  padding: 0;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
}

.site-footer__newsletter-submit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  padding: 11px 18px;
  border: 0;
  border-radius: 11px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}

.site-footer__newsletter-submit:hover { background: var(--color-primary-dark); }

.site-footer__newsletter-status {
  margin: 11px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
}

/* ---- Columns 2 and 3: link lists ----
   The frame sets 16px for both the column headings and the links on a 36px
   pitch. Stepped down to 14.5px / 32px pitch on request; this rule carries
   "Sortiment", "Zákaznický servis" and "Kontakt" alike. */
.site-footer__heading {
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a.site-footer__link {
  display: block;
  padding: 7px 0;
  font-size: 14.5px;
  line-height: 18px;
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity 0.2s;
}

.site-footer a.site-footer__link:hover {
  color: var(--color-ink);
  opacity: 0.62;
}

/* ---- Column 4: advisor pills and social tiles ---- */
/*
 * 231x74 in the frame. The avatar and the labels are sized so the widest
 * string ("Odpovíme do 24 hodin") still clears the pill's inner width once
 * the column narrows below the design's 230px — at the previous sizes it
 * pushed out through the rounded edge.
 */
.site-footer__contact-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 231px;
  min-height: 66px;
  margin-bottom: 16px;
  padding: 9px 12px;
  border-radius: 30px;
  background: var(--color-green-100);
}

.site-footer__contact-pill:last-of-type { margin-bottom: 0; }

.site-footer__contact-avatar {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  line-height: 0;
}

.site-footer__contact-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.site-footer__contact-avatar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-green-100);
  border-radius: 50%;
  background: #22c55e;
}

.site-footer__contact-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  /* Last-resort clip so nothing can print outside the pill. */
  overflow: hidden;
}

.site-footer__contact-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-ink);
}

.site-footer__contact-badge--online { background: var(--color-online); }
/* Outside advice hours: the same quiet fill the reply badge beside it carries. */
.site-footer__contact-badge--offline { background: var(--color-green-200); }
.site-footer__contact-badge--reply { background: var(--color-green-200); }

.site-footer a.site-footer__contact-value {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-decoration: underline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-footer__social-title {
  margin: 18px 0 10px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 18px;
  color: var(--color-ink);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 9px;
}

.site-footer a.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 16px;
  background: var(--color-green-100);
  color: var(--color-ink);
  font-size: 22px;
  transition: background 0.2s, transform 0.2s;
}

.site-footer a.site-footer__social-link:hover {
  opacity: 1;
  background: #fff;
  transform: translateY(-2px);
}

/* ---- Bottom row ---- */
.site-footer__bottom {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
}

.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  padding-bottom: 28px;
  font-size: 14px;
  line-height: 1.4;
}

.site-footer__copyright { margin: 0; color: var(--color-ink); }

.site-footer__payments {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.site-footer__payments-label { color: var(--color-ink); }

/*
 * The frame renders the card marks monochrome in ink on the sage, with no
 * white plate behind them — the brand-coloured PNGs are desaturated here
 * rather than being re-exported.
 */
.site-footer__payments img {
  display: block;
  height: 22px;
  width: auto;
  max-width: 96px;
  padding: 0;
  border-radius: 0;
  background: none;
  object-fit: contain;
  filter: grayscale(1) brightness(0.42) contrast(1.25);
}

.site-footer__payments img[alt="Comgate"] { height: 20px; max-width: 110px; }

.site-footer a.site-footer__cookies {
  display: inline-block;
  padding: 0;
  font-size: 14px;
  color: var(--color-ink);
  text-decoration: underline;
}

/* =====================================================================
   RESPONSIVE
   Below the design width the four-column grid collapses in stages. The
   mascot is the first thing to go: it sits in dead space in the frame and
   would land on the link lists as soon as the columns narrow.
   ===================================================================== */
@media (max-width: 1399.98px) {
  /*
    The fr ratio above keeps working; only the mascot has to go. Its slot - the
    gap between the newsletter block and the first link list - is a share of the
    content column, so it keeps narrowing; --footer-mascot-height shrinks the
    mascot to match down to about 1400px, and below that there is no room left
    for it at any sensible size.
  */
  .site-footer__mascot { display: none; }
}

@media (max-width: 991.98px) {
  .site-footer { margin-top: 40px; }
  .site-footer__inner { padding-top: 44px; padding-bottom: 44px; }
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
  }
  .site-footer__newsletter { margin-top: 32px; }
  .site-footer__bottom-inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px 24px;
  }
}

@media (max-width: 575.98px) {
  .site-footer__panel { border-radius: 16px 16px 0 0; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .site-footer__contact-pill { max-width: none; }
}