/**
 * expanding-panels.css — expand behaviour for the hero panel row.
 *
 * Pairs with the .hero-skills markup built in the Webflow Designer. Structural
 * styles (flex basis, sizing, colour, type) live in Webflow where they are
 * editable; this file holds only what the Designer cannot express — descendant
 * combinators and :focus-visible.
 *
 * The panels are <button> elements. They have to be focusable and tappable
 * because the badge names a skill — that content is unreachable otherwise on
 * a keyboard or a phone, where there is no hover at all.
 *
 * Behaviour is split by input mode. On pointer devices only hover and keyboard
 * (:focus-visible) open a panel — a mouse click deliberately does nothing, so
 * it cannot pin one open. On touch there is no hover and a tap does not match
 * :focus-visible, so plain :focus is what opens a panel there.
 *
 * Requires :has() (Chrome 105+, Safari 15.4+, Firefox 121+) to check focus at
 * the row level.
 *
 * There is deliberately no JavaScript. The BYQ gem this is modelled on ships a
 * script because it built the panels as an ARIA tablist, which needs roving
 * tabindex and arrow keys. A plain row of buttons needs none of that: Tab moves
 * between them natively, :hover and :focus do the reveal, and the global
 * prefers-reduced-motion guard in reset.css applies for free — which it could
 * not do if this were driven by GSAP.
 *
 * Markup contract:
 *   .hero-skills
 *   └ button.hero-skill_panel       ← one per skill
 *     ├ img.hero-skill_image
 *     └ div.hero-skill_caption
 *       └ div.hero-skill_title      ← rendered as a badge
 */

/* --------------------------------------------------------- base state --- */

.hero-skill_panel {
  transition: flex-grow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-skill_caption {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------- pointer + keyboard --- */

/*
 * Split by input mode rather than stacking more :not() guards on one chain,
 * because the two modes genuinely want different triggers.
 *
 * Here, focus is :focus-visible — keyboard only. A mouse click focuses a
 * button too, and keying off plain :focus would leave the clicked panel open
 * while the pointer moved on, showing two at once.
 *
 * The :not(:hover) guard on the row means hover always wins over a lingering
 * keyboard focus, so exactly one panel is ever open.
 */
@media (hover: hover) {
  .hero-skills:not(:hover):not(:has(:focus-visible))
    .hero-skill_panel:nth-child(3) {
    flex-grow: 6;
  }

  .hero-skills:not(:hover):not(:has(:focus-visible))
    .hero-skill_panel:nth-child(3)
    .hero-skill_caption {
    opacity: 1;
    transform: none;
  }

  .hero-skill_panel:hover,
  .hero-skills:not(:hover) .hero-skill_panel:focus-visible {
    flex-grow: 6;
  }

  .hero-skill_panel:hover .hero-skill_caption,
  .hero-skills:not(:hover) .hero-skill_panel:focus-visible .hero-skill_caption {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------- touch --- */

/*
 * No hover to rely on, and a tap does NOT match :focus-visible — so here plain
 * :focus is the only thing that can open a panel. Tapping a second one moves
 * focus, so only one stays open; tapping outside the row closes back to rest.
 */
@media (hover: none) {
  .hero-skills:not(:has(:focus)) .hero-skill_panel:nth-child(3) {
    flex-grow: 6;
  }

  .hero-skills:not(:has(:focus))
    .hero-skill_panel:nth-child(3)
    .hero-skill_caption {
    opacity: 1;
    transform: none;
  }

  .hero-skill_panel:focus {
    flex-grow: 6;
  }

  .hero-skill_panel:focus .hero-skill_caption {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------- panel count --- */

/*
 * Drop a panel at a time as the row narrows. A sliver stops reading as an
 * image below roughly 75px, and eight of them plus seven gaps eat the width
 * fast.
 *
 * display:none rather than visibility/opacity, so a hidden panel also leaves
 * the tab order — nothing focusable that nobody can see.
 *
 * Fewer panels also widens what is left, which is the point: at flex-grow 6,
 * eight panels give the open one 46.2% and each sliver 7.7%; seven give 50%
 * and 8.3%; six give 54.5% and 9.1%.
 */

/* 1025-1439 — seven */
@media (max-width: 1439px) {
  .hero-skill_panel:nth-child(n + 8) {
    display: none;
  }
}

/* 992-1024 — six */
@media (max-width: 1024px) {
  .hero-skill_panel:nth-child(n + 7) {
    display: none;
  }
}

/* ------------------------------------------------------------- focus --- */

/*
 * Inset rather than offset: a positive outline-offset would sit outside the
 * capsule the image draws and read as a detached rectangle.
 */
.hero-skill_panel:focus-visible {
  outline: 2px solid var(--border--accent, #4ca077);
  outline-offset: -2px;
}