/* Home: faixa de cases logo abaixo da primeira dobra.
   Um destaque (o Build da Florida Rental Car) + trilho com as 11 identidades
   visuais. Tudo é link direto para a página do case. Tokens em css/tokens.css. */

.cases-strip { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--c-rule-ink); }

.cases-strip__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s16) var(--s32); }
.cases-strip__head .t-h2 { margin-top: var(--s12); max-width: 18ch; }
.cases-strip__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; font-weight: var(--fw-medium); text-decoration: none; border-bottom: 1px solid var(--c-magenta); }
.cases-strip__all:hover { color: var(--c-magenta); }

/* Destaque: Florida Rental Car */
.cases-feature {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: stretch;
  border: 1px solid var(--c-rule-ink); border-radius: var(--radius-media); overflow: hidden;
  color: inherit; text-decoration: none; transition: border-color var(--dur-fast) var(--ease);
}
.cases-feature:hover { border-color: var(--c-magenta); opacity: 1; }
.cases-feature__logo { display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); background: var(--c-white); }
.cases-feature__logo img { width: min(100%, 300px); height: auto; transition: transform .6s var(--ease); }
.cases-feature:hover .cases-feature__logo img { transform: scale(1.04); }
.cases-feature__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 3.4vw, 44px); }
.cases-feature__name { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1; }
.cases-feature__desc { max-width: 52ch; color: var(--fg-muted); line-height: 1.6; }
.cases-feature__desc strong { color: #fff; font-weight: var(--fw-medium); }
.cases-feature__cta { margin-top: auto; padding-top: 4px; color: var(--c-magenta); font-weight: var(--fw-medium); }

/* Trilho de identidades visuais */
.cases-rail { margin-top: clamp(28px, 4vw, 44px); }
.cases-rail__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s16); margin-bottom: var(--s16); }
.cases-rail__label { margin: 0; font-size: .72rem; color: var(--fg-muted); }
.cases-rail__nav { display: flex; gap: 8px; }
.cases-rail__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-rule-ink); background: transparent; color: #fff; font-size: 1.1rem; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.cases-rail__btn:hover:not(:disabled) { border-color: #fff; }
.cases-rail__btn:disabled { opacity: .35; cursor: default; }
.cases-rail__btn:focus-visible { outline: var(--focus-w) solid var(--c-blue-bright); outline-offset: 2px; }

.cases-rail__track {
  list-style: none; margin: 0; padding: 0 0 12px;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4.3); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: var(--c-rule-ink) transparent;
}
.cases-rail__item { scroll-snap-align: start; min-width: 0; }
.cases-card { display: flex; flex-direction: column; gap: 8px; height: 100%; color: inherit; text-decoration: none; }
.cases-card:hover { opacity: 1; }
.cases-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-media); background: var(--c-rule-ink); }
.cases-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cases-card:hover .cases-card__media img { transform: scale(1.04); }
.cases-card__meta { font-size: .66rem; letter-spacing: .06em; color: var(--fg-muted); text-transform: uppercase; }
.cases-card__name { font-family: var(--font-display); font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.1; }
.cases-card:focus-visible, .cases-feature:focus-visible, .cases-strip__all:focus-visible { outline: var(--focus-w) solid var(--c-blue-bright); outline-offset: 4px; }

@media (max-width: 900px) {
  .cases-rail__track { grid-auto-columns: calc((100% - 16px) / 2.3); }
}
@media (max-width: 640px) {
  .cases-feature { grid-template-columns: 1fr; }
  .cases-feature__logo { padding: 16px; }
  .cases-feature__logo img { width: min(52%, 160px); }
  .cases-feature__body { gap: 8px; padding: 18px 18px 20px; }
  .cases-feature__desc { font-size: .95rem; line-height: 1.5; }
  .cases-rail__track { grid-auto-columns: 72%; gap: 12px; }
  .cases-rail__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cases-rail__track { scroll-behavior: auto; }
  .cases-feature__logo img, .cases-card__media img { transition: none; }
}