/* ==========================================================================
   Fastkava — B3 coffee types / Асортимент напоїв
   Grouped drink thumbnails (two columns) + a big centre image that follows
   hover / click / auto-advance.
   ========================================================================== */

.fk-drinks {
  position: relative;
  overflow: hidden;
  padding-block: clamp(52px, 8vw, 96px);
}

/* Header */
.fk-drinks__head { text-align: center; }
.fk-drinks__kicker,
.fk-drinks__group-label {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--fk-text-muted);
  /* justify-content only centres the line + span as a pair. Once a long group
     name wraps, the lines inside the span still need this to stay centred. */
  text-align: center;
}
.fk-drinks__kicker-line { width: 34px; height: 2px; background: var(--fk-accent); flex: none; }
.fk-drinks__title {
  margin: 14px auto 0; max-width: 60%;
  font-size: clamp(28px, 4.6vw, 52px); line-height: 1.1; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase; color: var(--fk-heading);
}

/* Layout */
/*
 * Desktop: two side columns with the stage between them.
 *
 * The groups are no longer wrapped in two column elements — they sit in one flat
 * track so a phone can slide them — so the columns are rebuilt here. The track
 * itself dissolves with `display: contents`, its groups become items of this
 * grid, and each one is placed explicitly: the side modifier picks the column
 * and --fk-drinks-row (written by PHP) picks the row. Explicit rather than
 * auto-flow, which would have started the right column below the left one
 * instead of alongside it.
 */
.fk-drinks__grid {
  display: grid; grid-template-columns: 344px minmax(0, 1fr) 344px;
  column-gap: 32px; row-gap: 22px;
  align-items: stretch; margin-top: 36px;
}
.fk-drinks__groups { display: contents; }
.fk-drinks__stage { grid-column: 2; grid-row: 1 / span var(--fk-drinks-rows, 2); }
.fk-drinks__group { align-self: start; }
.fk-drinks__group--left  { grid-column: 1; grid-row: var(--fk-drinks-row, auto); }
.fk-drinks__group--right { grid-column: 3; grid-row: var(--fk-drinks-row, auto); }
/* Controls belong to the phone slider only. */
.fk-drinks__nav { display: none; }

/* Group */
.fk-drinks__group-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.fk-drinks__group-title span:first-child { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fk-heading); }
.fk-drinks__group-rule { flex: 1; height: 1px; background: rgba(251,83,0,0.25); }
/*
 * Every group is the same 4x2 block, at every width.
 *
 * The columns used to drop to 3 between 820-1080px and again below 480px, so a
 * group reflowed from 4x2 to 3x2 and back as the window changed. Fixed at 4.
 *
 * The two rows are declared with an explicit height rather than left to flow,
 * so a group with fewer than five drinks still reserves the second row: the
 * groups then all stand the same height and the left and right columns line up
 * regardless of how many drinks each one holds. (Largest group here is 6, so
 * eight slots is always enough.)
 */
.fk-drinks__thumbs {
  --fk-drinks-thumb-h: 101px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, var(--fk-drinks-thumb-h));
  gap: 10px;
}

/* Thumb — fills its grid row, so the row height above is the single source. */
.fk-drinks__thumb {
  position: relative; height: 100%; border-radius: 16px; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding: 0 0 6px;
  background: rgba(255,243,233,0.03); border: 1px solid rgba(255,243,233,0.08);
  transition: transform .18s ease, background .18s ease;
}
:root[data-theme="light"] .fk-drinks__thumb { background: rgba(26,21,18,0.04); border-color: rgba(26,21,18,0.08); }
.fk-drinks__thumb:hover { transform: translateY(-3px); background: rgba(255,243,233,0.06); }
:root[data-theme="light"] .fk-drinks__thumb:hover { background: rgba(26,21,18,0.07); }
.fk-drinks__thumb-img { width: 100%; height: 83px; background-size: contain; background-repeat: no-repeat; background-position: center bottom; }
.fk-drinks__ring {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--fk-accent); opacity: 0;
  transition: opacity .4s ease-out, box-shadow .4s ease-out;
}
.fk-drinks__thumb.is-active .fk-drinks__ring { opacity: 1; box-shadow: 0 0 18px rgba(251,83,0,0.35); transition: opacity .15s ease-in, box-shadow .15s ease-in; }

/* Centre stage */
.fk-drinks__stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.fk-drinks__glow {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
  width: 520px; height: 520px; max-width: 100%; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,83,0,0.22) 0%, rgba(251,83,0,0.07) 42%, transparent 68%); pointer-events: none;
}
:root[data-theme="light"] .fk-drinks__glow { background: radial-gradient(circle, rgba(251,83,0,0.16) 0%, rgba(251,83,0,0.05) 42%, transparent 68%); }
.fk-drinks__img-wrap { position: relative; height: 525px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.fk-drinks__img {
  /*
   * Height raised from 470px so no drink renders narrower than 300px.
   *
   * These are tall cut-outs shown with `contain`, so HEIGHT is what sizes them:
   * rendered width = height x the source's aspect ratio. A `min-width` alone
   * would not work — with `contain` it only widens the box and letterboxes the
   * drink inside it, leaving the picture exactly as small as before.
   *
   * The binding case is the one source that is genuinely small (179x313); at
   * 470px tall it came out 269px wide. 525px puts it at 300px. Everything else
   * is 640x960 and simply scales with it, 313px -> 350px.
   */
  height: 100%; width: auto;
  max-height: 525px; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5));
  transition: opacity .3s ease;
}
.fk-drinks__img.is-fading { opacity: 0; }
.fk-drinks__shadow { width: 240px; height: 26px; margin-top: -10px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 70%); }
:root[data-theme="light"] .fk-drinks__shadow { background: radial-gradient(ellipse, rgba(0,0,0,0.28) 0%, transparent 70%); }
.fk-drinks__name { margin: 12px 0 8px; font-size: clamp(22px, 3vw, 32px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; text-transform: uppercase; color: var(--fk-heading); text-align: center; }

/* Responsive */
@media (max-width: 1080px) {
  /* Side columns widened from 260px: four thumbs have to fit where three used
     to, and at 260px each would have been squeezed to ~58px. */
  .fk-drinks__grid { grid-template-columns: 300px minmax(0,1fr) 300px; gap: 20px; }
}
@media (min-width: 821px) and (max-width: 1000px) {
  /* The narrowest desktop band: four thumbs across a 300px column leaves each
     ~68px — too small to read. Three across instead; grid-auto-rows keeps any
     overflow row (a custom group of 7+) the same height as the explicit two.
     Three thumbs also need less column than four did, so the sides give the
     freed width (2×40px) to the middle — the drink photo breathes, and each
     thumb still comes out ~80px, bigger than the ~68px it replaced. */
  .fk-drinks__grid { grid-template-columns: 260px minmax(0,1fr) 260px; }
  .fk-drinks__thumbs { grid-template-columns: repeat(3, 1fr); grid-auto-rows: var(--fk-drinks-thumb-h); }
}
@media (max-width: 820px) {
  .fk-drinks__title { max-width: 100%; }
  /*
   * Phone: the stage stays put and the groups become a swipeable slider.
   *
   * The grid becomes a plain column so the track is a single flex row again
   * (`display: contents` is dropped, restoring .fk-drinks__groups as a real box),
   * one group per screen, snapped. theme.js scrolls it to follow the auto-advance
   * as the selection crosses from one group into the next.
   */
  .fk-drinks__grid { display: flex; flex-direction: column; gap: 18px; }
  .fk-drinks__stage { order: -1; }
  .fk-drinks__img-wrap { height: 320px; }
  .fk-drinks__img { max-height: 320px; }

  .fk-drinks__groups {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fk-drinks__groups::-webkit-scrollbar { display: none; }
  .fk-drinks__group {
    flex: 0 0 100%; min-width: 0;
    scroll-snap-align: start;
    /* The desktop placement must not leak into the flex track. */
    grid-column: auto; grid-row: auto;
  }
  .fk-drinks__nav { display: flex; }
}
@media (max-width: 480px) {
  /* Still 4x2 — only the row height comes down. */
  .fk-drinks__thumbs { --fk-drinks-thumb-h: 88px; }
  .fk-drinks__thumb-img { height: 70px; }
}
@media (prefers-reduced-motion: reduce) { .fk-drinks__img { transition: none; } }

/* ---- "and 50+ more drinks" + link to the full menu page (B3.1) ----------- */
/*
 * Two homes for one pair (see coffee-types.php): on desktop the design puts
 * note + button inside the stage, right under the drink's name — that is
 * .fk-drinks__cta-row. Under 820px the stage moves above the slider, so the
 * row hides and the block-bottom .fk-drinks__cta-wrap twin shows instead.
 */
.fk-drinks__cta-row { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 1.8vw, 26px); margin-top: 16px; }
.fk-drinks__cta-wrap { display: none; }
@media (max-width: 820px) {
  .fk-drinks__cta-row { display: none; }
  .fk-drinks__cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; }
  /* Roomier on a phone: the note gets air on every side so it reads as its
     own line, not a caption glued to the button. */
  .fk-drinks__cta-wrap .fk-drinks__more { margin: 10px 24px; }
}
.fk-drinks__more {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; letter-spacing: 0.02em;
  color: var(--fk-text-muted); text-align: center;
}
/* The number, set apart: large, bold, accent — the "50+" is the message, the
   words around it are the frame. The design draws it in Playfair, but the
   client chose the regular face (Montserrat, inherited) instead. */
.fk-drinks__more-num {
  font-weight: 700; font-size: clamp(24px, 2.1vw, 30px); line-height: 1;
  color: var(--fk-accent); padding: 0 3px;
}
/* Desktop home: a grid item of its own in row 1 of the left column (PHP
   shifts both columns' groups down one row), so the first left and first
   right group start level — the note no longer bloats the left box. Space
   below comes from the grid's row-gap, not a margin, so it matches the
   rhythm between groups. Hidden on the slider layout — there the bottom
   cta-wrap twin shows it. */
.fk-drinks__more--col { grid-column: 1; grid-row: 1; align-self: end; text-align: left; margin: 0 24px 0 0; }
@media (max-width: 820px) {
  .fk-drinks__more--col { display: none; }
}
.fk-drinks__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(15px, 1.5vw, 19px) clamp(28px, 3.4vw, 46px);
  border-radius: 10px; background: var(--fk-accent); color: #FFFFFF;
  font-size: clamp(12px, 1.1vw, 14px); font-weight: 700; letter-spacing: 1.5px;
  transition: background-color var(--fk-dur) var(--fk-ease);
}
.fk-drinks__cta:hover,
.fk-drinks__cta:focus-visible { background: var(--fk-accent-2); color: #FFFFFF; }
@media (max-width: 640px) {
  .fk-drinks__cta-wrap { align-items: stretch; }
  .fk-drinks__cta { display: flex; width: 100%; box-sizing: border-box; }
}
@media (prefers-reduced-motion: reduce) { .fk-drinks__cta { transition: none; } }