/* Design lab: the World's 101 Best Steak Restaurants front page (/steaks) in the home page's design language - same
   sections as the Wix page, set with the home's heads, cards, bands (#ffffff / #edebe9 / #333333) and buttons. Text
   stays ink or white: no gold on the steaks pages (owner 2026-10-26). Built from _cms/steaks-home.html. */
.st .ed-kicker { color: var(--ink-soft); }
.st .ed-head__label::before, .st .ed-head__label::after { background: var(--rule); }
.st-center { text-align: center; margin-top: clamp(40px, 4vw, 56px); }
.st-center .ed-btn { margin-top: 0; }
.st-band { background: #edebe9; }
.st-band, .st-continents, .st-list .ed-wrap { padding-top: clamp(60px, 7vw, 100px); padding-bottom: clamp(60px, 7vw, 100px); }

/* hero: 80% of the Wix height (751px at 1440px = 52vw -> 41.7vw), logo scaled by the same factor */
.st-hero { position: relative; height: clamp(360px, 41.7vw, 760px); overflow: hidden; display: grid; place-items: center; background: #2b2b2a; }
.st-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.st-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.28)); }
.st-hero__logo { position: relative; z-index: 1; margin: 0; }
.st-hero__logo img { height: clamp(150px, 19.2vw, 300px); width: auto; }

/* the list: year band, then the top 10 */
.st-list__intro { background: #edebe9; text-align: center; padding: clamp(40px, 4.5vw, 64px) 0 clamp(36px, 4vw, 56px); }
.st-list__year { margin: 6px 0 0; font-family: var(--serif); font-size: clamp(64px, 7vw, 104px); line-height: 1; letter-spacing: 0.02em; }
.st-top { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(14px, 1.6vw, 24px); }
.st-top .ed-media { aspect-ratio: 1; margin-bottom: 14px; }
.st-top .ed-title { margin-top: 6px; font-size: clamp(19px, 1.55vw, 24px); }
.st-top .ed-dek { margin-top: 6px; font-size: 13px; line-height: 1.5; }

/* hall of fire / special awards: three portraits and a centred caption */
.st-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.st-trio .ed-media { aspect-ratio: 4 / 5; }
a.ed-media { display: block; }
.st-hof a.ed-media:hover img { transform: scale(1.035); }
.st-feature__name a { transition: color .2s; }
.st-feature__name a:hover { color: var(--gold); }
.st-feature { margin-top: clamp(30px, 3.4vw, 46px); text-align: center; }
.st-feature__name { margin: 12px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.2vw, 48px); line-height: 1.08; letter-spacing: 0.02em; }
.st-feature__place { margin-top: 8px; font: 300 12px/1.6 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.st-feature .ed-more { margin-top: 26px; }

/* dark band */
.st-dark { background: #333333; color: #fff; padding: clamp(60px, 7vw, 100px) 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.st-dark .ed-kicker, .st-dark .ed-head__sub, .st-dark .st-feature__place { color: rgba(255,255,255,.7); }
.st-dark .ed-head__label::before, .st-dark .ed-head__label::after { background: rgba(255,255,255,.25); }
.st-dark .ed-media { background: #2b2b2a; }

/* partners */
.st-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); align-items: center; max-width: 1040px; margin: 0 auto; }
.st-logos a { display: grid; place-items: center; height: 150px; padding: 0 8px; transition: opacity .2s; }
.st-logos a:hover { opacity: .65; }
.st-logos img { max-height: 120px; max-width: 100%; width: auto; object-fit: contain; }
.st-logos .is-white img { mix-blend-mode: multiply; }      /* logos delivered on white sit on the band colour */
.st-partners--strip { padding: clamp(44px, 5vw, 64px) 0; border-top: 1px solid var(--rule); }
.st-strip-title { margin: 0 0 18px; text-align: center; font: 400 11px/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.st-logos--small a { height: 130px; } .st-logos--small img { max-height: 104px; }

/* continents and outlets: portrait cards in threes */
.st-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 50px) clamp(16px, 2vw, 30px); }
.st-grid3 .ed-media { aspect-ratio: 3 / 4; margin-bottom: 16px; }
.st-grid3 .ed-title { margin-top: 6px; font-size: clamp(22px, 1.9vw, 28px); }
.st-grid3 .ed-dek { margin-top: 6px; font-size: 13.5px; }

@media (max-width: 1100px) {
  .st-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .st-hero { height: 88vw; }
  .st-hero__logo img { height: 46vw; }
  .st-top { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .st-top .ed-title { font-size: 18px; }
  .st-trio { grid-template-columns: 1fr 1fr; } .st-trio > :first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .st-grid3 { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .st-grid3 .ed-title { font-size: 19px; }
  .st-logos { grid-template-columns: 1fr 1fr; }
  .st-logos a { height: 90px; } .st-logos img { max-height: 60px; }
}

/* order and bands (owner 2026-10-26): list and top 10 white, the book grey, Hall of Fire below the book on white,
   Selected Partners white (a hairline separates the two white sections) */
.st-list__intro { background: transparent; padding-bottom: 0; }
.st-partners--top { padding: clamp(60px, 7vw, 100px) 0; border-top: 1px solid var(--rule); }
.st-hof { padding: clamp(60px, 7vw, 100px) 0; }
.ed-book.st-band .ed-media { background: #333333; }

/* special awards slider: one award per slide, tabs with the award names, arrows; names set like the card titles of
   Best by Continent */
.st-feature__name--card { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.12; letter-spacing: 0.01em; margin-top: 8px; }
.st-awards__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px; margin: -14px 0 clamp(28px, 3vw, 40px); }
.st-awards__tabs button { border: 0; background: none; color: rgba(255,255,255,.6); cursor: pointer; padding: 8px 0; font: 400 11px/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.st-awards__tabs button:hover { color: #fff; }
.st-awards__tabs button[aria-selected="true"] { color: #fff; border-bottom-color: #fff; }
.st-awards__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.st-awards__track::-webkit-scrollbar { display: none; }
.st-award { scroll-snap-align: start; }
.st-awards__nav { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.st-dark .ed-dest__arrow { color: #fff; }
.st-dark .ed-dest__arrow:disabled { opacity: .25; }
.st-dark .ed-more { color: #fff; }
@media (prefers-reduced-motion: reduce) { .st-awards__track { scroll-behavior: auto; } }
@media (max-width: 720px) { .st-awards__tabs { gap: 2px 16px; } .st-awards__tabs button { font-size: 9.5px; letter-spacing: 0.14em; } }

/* awards: name, second name line (restaurant / outlet) centred below it, city; the link sits at the right on the city's line */
.st-award .st-feature { position: relative; }
.st-feature__venue { margin-top: 4px; font-family: var(--serif); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.3; letter-spacing: 0.02em; color: rgba(255,255,255,.88); }
.st-award .st-feature__place { margin-top: 10px; }
.st-award .st-feature .ed-more { position: absolute; right: 0; bottom: 3px; margin: 0; }
@media (max-width: 720px) { .st-award .st-feature .ed-more { position: static; margin-top: 22px; } }

/* Top 10 a little larger (owner 2026-10-26): the section runs wider with tighter gaps */
.st-list .ed-wrap { max-width: 1480px; }
.st-top { gap: clamp(30px, 3vw, 44px) clamp(12px, 1.2vw, 18px); }
/* restaurant captions everywhere on the page: centred, name 1 / name 2 / city; long names wrap evenly
   (e.g. "The Grill at the International", "Williams ButchersTable") */
.st-top .ed-card, .st-grid3 .ed-card { text-align: center; }
.st-name { text-wrap: balance; overflow-wrap: anywhere; hyphens: manual; }
.st-top .st-name { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.15; }
/* name 2 in Poppins, small and tight (owner 2026-11-08), so a card without it does not leave a big gap above the city;
   caption lines set compactly (owner 2026-11-08: "kompakter") */
.st-top .ed-card .ed-media, .st-grid3 .ed-card .ed-media { margin-bottom: 12px; }
.st-top .ed-card .st-name, .st-grid3 .ed-card .st-name { margin-top: 2px; line-height: 1.1; }
.st-name2 { margin-top: 2px; font: 300 13px/1.25 var(--sans); letter-spacing: 0.02em; color: var(--ink-soft); text-wrap: balance; }
.st-place { margin-top: 6px; font: 400 10.5px/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); text-wrap: balance; }
@media (max-width: 720px) { .st-top .st-name { font-size: 17px; } .st-name2 { font-size: 12px; } .st-place { font-size: 9.5px; letter-spacing: 0.14em; } }
/* cities on one line across each row (owner 2026-11-08): every card spans the same five rows of its grid row
   (photo, No., name, name 2, city) via subgrid, so the city row starts at the same height in all cards of that row;
   a row whose restaurants have no name 2 gets no extra space. The space between card rows moves from the grid's row-gap
   (which would otherwise also open up between the five caption rows) to a bottom margin on each card.
   Browsers without subgrid keep the old stacked layout. */
.st-top { --st-rgap: clamp(30px, 3vw, 44px); } .st-grid3 { --st-rgap: clamp(30px, 3.4vw, 50px); }
@media (max-width: 720px) { .st-top { --st-rgap: 26px; } .st-grid3 { --st-rgap: 28px; } }
@supports (grid-template-rows: subgrid) {
  .st-top, .st-grid3 { row-gap: 0; margin-bottom: calc(-1 * var(--st-rgap)); }
  .st-top > li, .st-grid3 > li { margin-bottom: var(--st-rgap); }
  .st-top > li, .st-grid3 > li, .st-top .ed-card, .st-grid3 .ed-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .st-top .ed-card > *, .st-grid3 .ed-card > * { align-self: start; }
  .st-top .ed-card > .ed-media, .st-grid3 .ed-card > .ed-media { grid-row: 1; }
  .st-top .ed-card > .ed-kicker, .st-grid3 .ed-card > .ed-kicker { grid-row: 2; }
  .st-top .ed-card > .st-name, .st-grid3 .ed-card > .st-name { grid-row: 3; }
  .st-top .ed-card > .st-name2, .st-grid3 .ed-card > .st-name2 { grid-row: 4; }
  .st-top .ed-card > .st-place, .st-grid3 .ed-card > .st-place { grid-row: 5; }
}

/* "The List 2026" (owner 2026-10-26): "The List" in Poppins capitals, the year in The Seasons - same sizes as on the 1-101 page */
.st-list__intro .ed-kicker { font: 300 15px/1.4 var(--sans); letter-spacing: 0.32em; color: var(--ink); }
.st-list__year { font-size: clamp(64px, 6.2vw, 92px); margin-top: 8px; }
@media (max-width: 720px) { .st-list__intro .ed-kicker { font-size: 12px; } .st-list__year { font-size: 60px; } }