/* Responsive and layout QA (Sage, 2026-10-16), loaded last on the homepage, content pages and booking routes.
   Fixes found in a 390 / 768 / 1440 pass. Each block names what it fixes; owners of the underlying files were told.
   Rules: no grey text (Kotaro), no view-transition-name here (Kira's language switch), /classes/ and .booking-v2
   are left to Kira and Robin, no !important on menu animation layers (Nico). */

/* Homepage: the hamburger floats over copy once the header slides away; give it a paper disc so it never
   sits on top of text. */
html.is-scrolled:not(.is-gnav-open) body .l-gnav-toggle{background:rgba(248,247,244,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50%;box-shadow:0 6px 18px -8px rgba(30,34,28,.35)}

/* Homepage: access line is justified, which opens wide gaps between words. */
html body .p-top-access__text{text-align:left!important}

/* Homepage footer: the legal links were styled as small uppercase labels, unlike every other footer link. */
html body .l-footer-bottom-link__item a{text-transform:none!important;letter-spacing:0!important}

/* Journal posts: the post image was forced into a 21:9 band, cutting portrait photos (the NYT flyer) to a strip.
   Show the whole picture, up to most of the screen height. */
html body .article__image{aspect-ratio:auto!important;max-height:none!important;display:flex;justify-content:center;background:var(--tcs-paper-2,#f0eee7)}
html body .article__image img{width:auto!important;max-width:100%;height:auto!important;max-height:min(82vh,900px);object-fit:contain!important}

/* Gifts: the portrait lantern photo in a 21:9 band showed only a sliver; frame the lanterns, not the ceiling. */
html body .page-hero__image img[src*="kyoto-lanterns"]{object-position:50% 38%}

/* Journal cards: portrait photos are cropped to 4:3; keep faces, which sit high in most travel photos. */
html body .journal-card img{object-position:50% 30%}

@media (max-width:900px){
 /* Content pages without a hero photo (Journal) kept the desktop 8/4 grid on phones, so the title ran one word
    per line beside a narrow intro. Single column. */
 html body .page-hero:not(:has(figure)),html body .page-hero{grid-template-columns:minmax(0,1fr)!important}
 html body .page-hero__copy .intro{grid-column:1!important;justify-self:start!important;margin-top:18px}
}

@media (max-width:767px){
 /* Homepage class carousel: the neighbouring cards' titles and prices peeked in as cut words at both edges.
    Only the photo of the neighbours shows; the centred card keeps its text. */
 html body .tcs-class-card:not(.is-active) :is(.tcs-class-card__head,.tcs-class-card__facts,.tcs-class-card__links){opacity:0;transition:opacity .35s ease}
 html body .tcs-class-card.is-active :is(.tcs-class-card__head,.tcs-class-card__facts,.tcs-class-card__links){opacity:1;transition:opacity .45s ease .1s}

 /* Homepage instructors: two cards side by side in a scroller cut the second one at "Chef Sh". Stack them. */
 html body .tcs-team__grid{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;gap:40px!important}
 html body .tcs-team__grid>li{width:auto!important;min-width:0!important;max-width:none!important}

 /* About film: the play button sat on the heading. Put it at the bottom right, clear of the caption. */
 html body .film__play{top:auto!important;bottom:22px!important;left:auto!important;right:6%!important}
 html body .film__caption{right:calc(6% + 84px)!important}

 /* Tap targets: footer and inline text links were 15-20px tall; give them a 40px hit area without moving text. */
 html body :is(.site-footer__links,.site-footer__social,.l-footer-nav__menu,.l-footer-bottom-link) a{display:inline-block;padding-block:9px}
 html body .info-list dd a{display:inline-block;padding-block:8px}
}

/* Homepage groups: the landscape group photo in a tall frame showed the concrete ceiling and cut the faces at the
   bottom edge. Frame the people. */
html body .tcs-groups-section img[src*="55-section-p-top-spa"]{object-position:50% 100%!important;scale:1.42;transform-origin:50% 96%}
html body .tcs-groups-section :has(>img[src*="55-section-p-top-spa"]){overflow:hidden}