/* ============================================================
   FOOTER — the one footer, for every page including the front.
   ============================================================

   The site used to carry two: the front page had its own
   <footer class="footer"> inside its raw source (styled by front-page.css,
   with icon badges), and every other page got parts/footer.html's plainer
   <footer class="site-footer"> (styled by subpages.css, text only). Editing
   the footer meant editing it twice — exactly the drift this plugin exists
   to remove. This file is the single owner of that region now, and the
   template part is the single owner of its markup.

   Which design won: the front page's. It is the richer one, and it is the
   one the site owner pointed at. Its inner structure (.strip-row icon
   badges, .footer-top, .footer-bottom) is reproduced here, but hung off the
   root class .site-footer rather than .footer — that keeps the visual
   editor's save guard (which requires the literal `site-footer` anchor)
   protecting the footer exactly as before.

   Scoping: every rule is qualified with .site-footer, deliberately. The
   inner class names (.footer-top, .footer-col, .footer-bottom) also exist in
   subpages.css with the OLD design's values, and this file loads alongside
   it. The extra specificity means this file wins regardless of enqueue
   order, instead of depending on load sequence. The superseded subpages.css
   rules (including .footer-strip, whose markup is gone) simply stop
   matching; front-page.css's now-dead .footer/.strip rules are likewise left
   alone so that file stays a faithful extraction of the original static
   index.html.

   Breakpoints follow the front page's (1100/900/620), not subpages.css's
   (1100/800/560), because this is the front page's design.

   Loaded on EVERY page — see inc/enqueue.php. On the front page that is one
   hand-authored stylesheet added next to front-page.css; the theme's
   deliberate dequeue of all WordPress CSS there (global-styles,
   block-library, theme.json fonts) is untouched. All custom properties this
   file uses (--ink, --on-ink, --on-ink-mute, --emerald-soft, --logo, --text,
   --ui) are defined by BOTH front-page.css and subpages.css, so it resolves
   under either. */

/* ---------- INSTAGRAM STRIP ---------- */
/* Sits directly on top of the dark footer, full bleed, no gutters — six
   tiles reading as one continuous band. It lives in the footer template part
   so it travels with the footer everywhere. */
.ig{padding:0;background:var(--bone-2)}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr)}
.ig-grid a{position:relative;display:block;overflow:hidden}
.ig-grid img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ig-grid a::after{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.2' cy='6.8' r='0.65' fill='white' stroke='none'/%3E%3C/svg%3E");position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(26,26,22,.38);opacity:0;transition:opacity .3s ease;
  /* Decorative only. Without this the overlay swallows the click and the
     editor selects the wrapping link instead of the photo, so swapping a
     tile image by clicking it would be impossible. Hover still works: it is
     the anchor that is hovered, not the pseudo-element. */
  pointer-events:none}
.ig-grid a:hover::after{opacity:1}
.ig-grid a:hover img{transform:scale(1.05)}

/* ---------- FOOTER BODY ---------- */
.site-footer{padding:clamp(72px,7vw,104px) 0 28px;background:var(--ink);color:var(--on-ink)}
.site-footer .footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(36px,4vw,64px);align-items:start}
.site-footer .footer-brand .site-logo,.site-footer .footer-brand .logo{display:block;color:#fff;font-family:var(--logo);font-size:24px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.site-footer .footer-brand p{max-width:300px;margin-top:18px;color:var(--on-ink-mute);font-family:var(--text);font-weight:400;font-size:15px;line-height:1.6}
/* The link-column headings and the newsletter heading are deliberately
   different: columns are quiet emerald labels, the newsletter is a white
   heading that has to compete with them for attention. */
.site-footer .footer-col h2,.site-footer .footer-col h4{margin:0 0 18px;color:var(--emerald-soft);font-family:var(--ui);font-size:15.8125px;font-weight:600;letter-spacing:.2em;text-transform:none}
.site-footer .footer-join h2,.site-footer .footer-join h4{margin:0 0 8px;color:#fff;font-family:var(--ui);font-size:16px;font-weight:600;letter-spacing:normal;text-transform:none}
.site-footer .footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.site-footer .footer-col a{position:relative;font-size:14px;color:var(--on-ink)}
.site-footer .footer-col a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:right .3s}
.site-footer .footer-col a:hover::after{right:0}
.site-footer .footer-join p{max-width:280px;margin-bottom:18px;color:var(--on-ink-mute);font-family:var(--text);font-weight:400;font-size:15px}
.site-footer .footer-join form{display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.25)}
.site-footer .footer-join input{flex:1;min-width:0;padding:12px 0;border:0;outline:0;background:transparent;color:#fff;font-size:13px}
.site-footer .footer-join input::placeholder{color:var(--on-ink-mute);font-size:15.8125px;letter-spacing:.14em}
.site-footer .footer-join button{padding:8px;border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer}

/* ---------- CONTACT STRIP (icon badges) ---------- */
.site-footer .strip-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(52px,5vw,76px);border-top:1px solid rgba(255,255,255,.16)}
.site-footer .strip-cell{display:flex;align-items:center;gap:16px;padding:30px 24px;border-left:1px solid rgba(255,255,255,.14)}
.site-footer .strip-cell:first-child{border-left:0;padding-left:0}
.site-footer .strip-ic{width:42px;height:42px;border:1px solid var(--emerald-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--emerald-soft);flex:none;transition:color .25s ease,border-color .25s ease}
.site-footer .strip-cell:hover .strip-ic{color:#fff;border-color:#fff}
.site-footer .strip-cell .label{display:block;margin-bottom:2px;color:var(--on-ink-mute);font-size:14.375px;font-weight:600;letter-spacing:.18em}
.site-footer .strip-cell .label a:hover,.site-footer .strip-cell a.label:hover{color:#fff}
.site-footer .strip-cell .val{font-size:14px;font-weight:500;color:var(--on-ink)}
.site-footer .strip-cell a.val:hover{color:#fff}

/* ---------- BOTTOM LINE ---------- */
.site-footer .footer-bottom{margin-top:0;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--on-ink-mute);font-size:13.75px;font-weight:600;letter-spacing:.12em}
.site-footer .footer-bottom a{position:relative}
.site-footer .footer-bottom a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:right .3s}
.site-footer .footer-bottom a:hover::after{right:0}

@media (max-width:1100px){
  .site-footer .footer-top{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:900px){
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .site-footer .strip-row{grid-template-columns:1fr 1fr}
  .site-footer .strip-cell{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-left:0}
  .site-footer .strip-cell:nth-child(-n+2){border-top:0}
  .site-footer .strip-cell:nth-child(even){border-left:1px solid rgba(255,255,255,.14);padding-left:24px}
}
@media (max-width:620px){
  /* Na telefone je cely footer centrovany: stlpce pod sebou, kontaktne
     bunky s ikonou nad textom, newsletter aj spodny riadok na stred. */
  .site-footer .footer-top{grid-template-columns:1fr;gap:38px;text-align:center}
  .site-footer .footer-brand p{margin-inline:auto}
  .site-footer .footer-join p{margin-inline:auto}
  .site-footer .footer-join form{max-width:320px;margin-inline:auto}
  .site-footer .strip-row{grid-template-columns:1fr}
  .site-footer .strip-cell{border-left:0!important;padding:30px 0!important;flex-direction:column;gap:12px;text-align:center}
  .site-footer .strip-cell:nth-child(2){border-top:1px solid rgba(255,255,255,.14)}
  .site-footer .footer-bottom{flex-direction:column;align-items:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .ig-grid img{transition:none}
  .ig-grid a:hover img{transform:none}
}