/* FFF — interaction polish (client feedback round 1).
 *
 * Loaded last, after app.css/mobile.css/motion.css, so these win without
 * !important except where an inline style would otherwise outrank them.
 *
 * Tailwind v4's preflight gives <button> `appearance: button` but leaves the
 * cursor at `default` — every custom button on the page therefore showed an
 * arrow instead of a hand. Restore the pointer for real interactive elements.
 */

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
summary,
label[for],
[data-rail-toggle],
[data-rail-close],
[data-learn-prev],
[data-learn-next],
[data-learn-card],
[data-nav-burger],
[data-stats-play] {
  cursor: pointer;
}

button:disabled { cursor: not-allowed; }

/* ============ FOOTER — agency credit link ============ */
/* "be jokių papildomų žymėjimų": no underline, no colour shift — it reads exactly
   like the plain text it replaced, just clickable. */
.fff-credit-link,
.fff-credit-link:hover,
.fff-credit-link:focus {
  color: inherit;
  text-decoration: none;
}

/* ============ Auto-linked e-mails / phones in contact blurbs ============ */
/* Reads as plain copy until hovered, so the contact blocks keep their design. */
.fff-inline-link {
  color: inherit;
  text-decoration: none;
}
.fff-inline-link:hover,
.fff-inline-link:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ RAIL PANEL — open/closed state (was inline styles) ============ */
/* Shared state; the geometry is per-breakpoint below. */
.fff-rail-panel {
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}
.fff-rail-panel[data-open] {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop: slides in from the right edge, vertically centred.
   MUST stay inside this media query — ui.css is enqueued AFTER mobile.css, and a
   media query adds no specificity, so an unscoped rule here would beat the phone
   layout in mobile.css purely on source order. */
@media (min-width: 768px) {
  .fff-rail-panel {
    right: 28px;
    top: 50%;
    width: 840px;
    max-width: calc(100vw - 56px);
    transform: translate(40px, -50%);
  }
  .fff-rail-panel[data-open] { transform: translate(0, -50%); }
}

/* ============ PRICING — hover shadow twice as strong ============ */
/* Base card sits flat; hover lifts it with a markedly deeper shadow. The inner
   wrapper (not .fff-tier itself) carries the rounded corners + overflow. */
.fff-pricing .fff-tier > div[class*="min-h-"] {
  box-shadow: 0 18px 40px rgba(18, 20, 40, 0.18);
  transition: box-shadow .3s ease, transform .3s ease;
}
.fff-pricing .fff-tier:hover > div[class*="min-h-"] {
  /* ~2× the resting shadow: higher alpha + longer spread on both layers */
  box-shadow: 0 30px 70px rgba(18, 20, 40, 0.42), 0 10px 26px rgba(18, 20, 40, 0.30);
  transform: translateY(-4px);
}

/* ============ SPONSORS — featured tiles grow on hover ============ */
.fff-sponsors-featured > * {
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}
.fff-sponsors-featured > *:hover {
  transform: scale(1.06);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
  z-index: 5;
}
/* Small logo row: a gentle lift so linked logos read as clickable. */
.fff-sponsors-logos a { transition: transform .3s ease; display: flex; }
.fff-sponsors-logos a:hover { transform: scale(1.1); }

/* ============ STATS — labels line up in one column ============ */
/* Desktop only: mobile.css deliberately staggers these rows (Figma #0:1674), so
   the grid must not apply below 768px. */
@media (min-width: 768px) {
  [data-stats] .fff-stat-row > .flex.items-start {
    display: grid;
    grid-template-columns: var(--fff-stat-col, 300px) 1fr;
    align-items: start;
  }
  [data-stats] .fff-stat-row > .flex.items-start > span:last-child {
    margin-left: 0;
  }
}

/* ============ LEARN — bigger prev/next arrows ============ */
/* Client: "Toliau Atgal rodyklės per mažos." Scale the circle + glyph. */
.fff-learn [data-learn-prev] span,
.fff-learn [data-learn-next] span {
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
}
.fff-learn [data-learn-prev],
.fff-learn [data-learn-next] {
  font-size: 13px;
}
/* Side cards invite a click. */
.fff-learn [data-learn-card] { cursor: pointer; }
.fff-learn [data-learn-card][data-active] { cursor: default; }