/* GRANDTHAI design system 1: public frontend role mappings.
 * Load after typography/accessibility/page CSS. Existing layouts, heading type,
 * content, image crops, commerce states and slider behaviour keep their owners.
 * Removing gt-design-system-v1 restores the incumbent frontend. */

body.gt-design-system-v1 {
  --gt-ds-green: var(--wp--preset--color--grandthai-dark-green, #284e37);
  --gt-ds-cream: var(--wp--preset--color--grandthai-gold, #f3dcac);
  --gt-ds-text-secondary: var(--wp--preset--color--grandthai-muted, #536257);
  --gt-ds-section: 56px;
  --gt-ds-section-accent: 64px;
  --gt-ds-section-compact: 28px;
  --gt-ds-heading-gap: 28px;
  --gt-ds-gap: 16px;
  --gt-ds-card-padding: 20px;
  --gt-ds-card-radius: 24px;
  --gt-ds-panel-padding: 32px;
  --gt-ds-panel-radius: 32px;
  --gt-ds-media-radius: 16px;
  --gt-ds-note-size: 14px;
  --gt-ds-state-duration: 180ms;
  --gt-ds-feedback-duration: 120ms;
  --gt-ds-ease: cubic-bezier(.22, 1, .36, 1);
  --section-space: var(--gt-ds-section);
  --gt-density-gap: var(--gt-ds-gap);
  --gt-density-card: var(--gt-ds-card-padding);
  --wp--preset--font-size--gt-h2: var(--gt-type-h2-size);
  --wp--preset--font-size--gt-h3: var(--gt-type-h3-size);
  --wp--preset--font-size--gt-body: var(--gt-type-body-size);
}

/* Explicit outer sections only; heroes, proof strips and article subsections
 * are exceptions. Nested builders and the franchise timeline are not sections. */
body.gt-design-system-v1 main :is(
  .section, .spa-section, .face-section, .about-section, .rc-section,
  .corporate-section, .cert-section, .abon-section, .deposit-section,
  .service-section, .spa-etiquette-section, .selector-content,
  .about-quiz-section, .corporate-intro, .ba-layout, .ba-related,
  .ba-blog-section, .tp-document-section, .tp-related, .gt-app__benefits
) {
  padding-block: var(--gt-ds-section);
}

body.gt-design-system-v1 main :is(
  .section-compact, .service-source-summary
) {
  padding-block: var(--gt-ds-section-compact);
}

body.gt-design-system-v1 main :is(
  .spa-visit, .spa-final, .face-philosophy, .face-journey, .face-final,
  .branch-promo, .branch-final, .cert-final, .abon-final, .deposit-final,
  .corporate-final, .spa-etiquette-final, .booking-section,
  .ba-final, .tp-final, .spap-final, .seo-final, .franchise-final
) {
  padding-block: var(--gt-ds-section-accent);
}

body.gt-design-system-v1 main :is(.spa-catalog, .face-catalog) {
  padding-top: 48px;
}

/* These app rows are intentionally adjacent panels: one shared gap rather
 * than two full section insets around every illustration. */
body.gt-design-system-v1 main .gt-app__club-section {
  padding-top: 20px;
  padding-bottom: var(--gt-ds-section);
}
body.gt-design-system-v1 main :is(.gt-app__download-section, .gt-app__faq-section) {
  padding-bottom: var(--gt-ds-section);
}

body.gt-design-system-v1 main :is(
  .section-heading, .section-heading--center, .articles-head, .branch-head,
  .reviews-heading, .spa-heading, .face-heading, .about-section__head,
  .rc-heading, .corporate-heading, .cert-heading, .abon-heading,
  .deposit-heading, .service-heading, .spa-etiquette-heading,
  .selector-heading, .gt-app__section-heading
) {
  margin-bottom: var(--gt-ds-heading-gap);
}

body.gt-design-system-v1 main :is(
  .section-heading, .branch-head, .reviews-heading, .articles-head,
  .spa-heading, .face-heading, .about-section__head, .rc-heading,
  .corporate-heading, .cert-heading, .abon-heading, .deposit-heading,
  .service-heading, .spa-etiquette-heading, .gt-app__section-heading
) > :is(h2, h3) {
  margin-bottom: 12px;
}

/* Explicit notes override the incumbent intro/head wildcard. Text is intact. */
body.gt-design-system-v1.gt-typography-v1 main.spa-hub .spa-catalog .spa-heading > p.spa-note {
  font-size: var(--gt-ds-note-size);
  font-weight: var(--gt-type-small-weight, 400);
  line-height: 1.5;
  letter-spacing: 0;
}

body.gt-design-system-v1.gt-typography-v1 main#primary.gt-app .gt-app__intro > p.gt-app__fine {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--wp--preset--color--grandthai-ink, #294a36);
}

body.gt-design-system-v1 main.gt-app .gt-app__club-note {
  color: var(--wp--preset--color--grandthai-ink, #294a36);
}

body.gt-design-system-v1 main :is(.breadcrumbs, .wc-breadcrumbs, [class*="-breadcrumbs"]) {
  font-size: var(--gt-type-breadcrumb-size, 11px);
}

/* Repeated content grids share a gap, never a forced column count. Slider
 * tracks, scroll-snap widths, hero compositions and form grids stay local. */
body.gt-design-system-v1 main :is(
  .program-grid, .service-grid, .services-grid, .gift-grid, .article-grid,
  .master-grid, .shop-grid, .why-grid, .spa-program-grid, .face-services,
  .spa-masters__grid, .face-masters__grid, .spa-interiors,
  .face-gallery__grid, .face-review-quotes, .gt-review-snapshot__cards,
  .branches-hub-grid, .branches-hub-choice__grid, .branch-service-grid,
  .branch-master-grid, .branch-shop-grid, .branch-review-grid,
  .branch-visit-grid, .philosophy-cards, .values-grid, .standards-grid,
  .team-grid, .experience-grid, .rc-contact-grid, .rc-messenger-grid,
  .rc-help-grid, .rc-source-grid, .rc-reviews-grid, .rc-theme-grid,
  .corporate-audience-grid, .corporate-benefit-grid, .corporate-format-grid,
  .nominal-grid, .format-grid, .occasion-grid, .scenario-grid,
  .trust-cert-grid, .plan-grid, .deposit-grid, .benefit-grid, .ritual-grid,
  .suitability-grid, .master-mini-grid, .related-grid, .review-product-grid,
  .spap-grid, .seo-program-grid, .ba-blog-grid, .ba-related-grid,
  .tp-related-grid, .selector-result-grid, .franchise-fit__grid,
  .gtfb-package-grid, .gtfb-launch-grid, .franchise-tools__grid,
  .gt-app__features
) {
  gap: var(--gt-ds-gap);
}

/* Media-first cards keep their media edge-to-edge and pad the actual body. */
body.gt-design-system-v1 main :is(
  .program-card, .service-card, .shop-card, .master-card, .related-card,
  .plan-card, .deposit-card, .nominal-card, .spap-card, .seo-program,
  .spa-master, .face-master, .face-course-teaser, .article-card,
  .ba-blog-card, .branches-hub-card, .corporate-audience-card,
  .master-mini, .franchise-income-card, .franchise-tools__card,
  .team-card, .founder-card, .rc-choice-card
) {
  border-radius: var(--gt-ds-card-radius);
}

body.gt-design-system-v1 main :is(
  .program-card__content, .program-card__body, .service-card__body,
  .gift-service__body, .shop-card__body, .master-card__body,
  .related-card__body, .plan-card__body, .deposit-card__body,
  .nominal-card__body, .spap-card__body, .seo-program__body,
  .spa-master__body, .face-master__body, .ba-blog-card__body,
  .branches-hub-card__content, .master-mini__body
) {
  padding: var(--gt-ds-card-padding);
}

/* Subgrid facts/actions remain in their aligned rows. No fixed text height. */
body.gt-design-system-v1 main :is(.spa-program-card, .face-service) {
  gap: 12px;
  padding: var(--gt-ds-card-padding);
  border-radius: var(--gt-ds-card-radius);
}

body.gt-design-system-v1 main :is(
  .philosophy-card, .value-card, .standard-card, .experience-card,
  .branch-visit-step, .branch-review, .branch-route__card,
  .rc-contact-card, .rc-messenger, .rc-help-card, .rc-trust-card,
  .rc-source-card, .rc-review, .rc-theme-card, .promo-step,
  .promo-benefit, .promo-compare__card, .ritual-card, .benefit-card,
  .suitability-card, .review-product, .format-card, .use-step,
  .trust-cert, .cert-review, .gtfb-package-card, .gtfb-launch-card,
  .franchise-fit-card, .gt-app__feature,
  .face-review-quotes figure, .gt-review-snapshot__card
) {
  padding: var(--gt-ds-card-padding);
  border-radius: var(--gt-ds-card-radius);
}

/* Named multi-column groups and CTA panels retain their composition and
 * surface. Padding belongs to the panel, not its already-padded section. */
body.gt-design-system-v1 main :is(
  .face-picker, .spa-reviews, .spa-gift__banner, .face-reviews__box,
  .branch-final__box, .branch-picker__box, .branch-promo__content,
  .branches-hub-final__box, .corporate-final__box, .cert-final__box,
  .abon-final__box, .deposit-final__box, .abon-consult__box,
  .deposit-consult__box, .seo-final__box, .spap-final__box,
  .promo-final__box, .prices-final__box, .ba-final__box, .tp-final__box,
  .spa-etiquette-final__box, .gt-app__club, .gt-app__download,
  .builder-step, .expert-content, .ba-side-card, .tp-sidebar-card
) {
  padding: var(--gt-ds-panel-padding);
  border-radius: var(--gt-ds-panel-radius);
}

body.gt-design-system-v1 main :is(
  .branch-slide, .seo-branch, .spap-branch, .branch-about,
  .face-gift__box, .face-final__box, .spa-final__box,
  .first-visit__box, .wc-result-card, .wc-form-card, .wc-summary-card,
  .gtfb-panel, .gtfb-economics-panel
) {
  border-radius: var(--gt-ds-panel-radius);
}

body.gt-design-system-v1 main :is(
  .branch-slide__content, .branch-product__content, .spap-branch > div,
  .seo-branch > div
) {
  padding: var(--gt-ds-panel-padding);
}

body.gt-design-system-v1 main :is(
  .spa-interiors button, .face-gallery__grid picture,
  .face-gallery__grid figure > img, .face-intent, .face-explainer,
  details.face-compare, .spa-duration__options a, .spa-duration__fixed,
  .face-duration__options a, .face-duration__fixed
) {
  border-radius: var(--gt-ds-media-radius);
}

body.gt-design-system-v1 main.face-hub .face-masters > .face-heading > h3 {
  font-size: 28px;
  line-height: 1.2;
}

/* Same geometry; button colours, focus rings, loading and disabled semantics
 * stay component-owned. Icon buttons and sliders retain their own hit areas. */
body.gt-design-system-v1 :is(
  .btn, .wp-element-button, .wp-block-button__link,
  .woocommerce button.button, .woocommerce a.button, .woocommerce input.button
) {
  min-height: var(--gt-button-height, 46px);
  height: auto;
  padding: var(--gt-button-padding-y, 8px) var(--gt-button-padding-x, 18px);
  border-radius: var(--gt-radius-pill, 999px);
  white-space: normal;
  transition: background-color var(--gt-ds-state-duration) ease,
    border-color var(--gt-ds-state-duration) ease,
    color var(--gt-ds-state-duration) ease,
    transform var(--gt-ds-feedback-duration) var(--gt-ds-ease);
}

body.gt-design-system-v1 :is(.lead-form, .selector-form, .woocommerce-form) :is(
  input[type="text"], input[type="search"], input[type="email"],
  input[type="tel"], input[type="password"], input[type="date"],
  input[type="time"], select
) {
  min-height: 48px;
  height: 48px;
  border-radius: var(--gt-radius-pill, 999px);
  font-size: var(--gt-type-form-input-size, 16px);
}

body.gt-design-system-v1 :is(.lead-form, .selector-form, .woocommerce-form) textarea {
  border-radius: var(--gt-radius-textarea, 24px);
  font-size: var(--gt-type-form-input-size, 16px);
}

/* Bounded optional reveal: only JS adds pending below the first viewport.
 * Static/no-JS/reduced-motion content always starts visible. */
@media (prefers-reduced-motion: no-preference) {
  body.gt-design-system-v1 main .gt-ds-reveal {
    transition: opacity 380ms var(--gt-ds-ease), transform 380ms var(--gt-ds-ease);
  }
  body.gt-design-system-v1 main .gt-ds-reveal.is-gt-ds-pending {
    opacity: 0;
    transform: translateY(8px);
  }
}

body.gt-design-system-v1 main .gt-ds-reveal.is-gt-ds-pending:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.gt-design-system-v1 .btn:not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-1px);
  }
  body.gt-design-system-v1 .btn:not(:disabled):not([aria-disabled="true"]):active {
    transform: translateY(0);
  }
  body.gt-design-system-v1 main :is(a.spa-program__image, a.face-service__media) img {
    transition: transform 280ms var(--gt-ds-ease);
  }
  body.gt-design-system-v1 main :is(a.spa-program__image, a.face-service__media):hover img {
    transform: scale(1.015);
  }
}

@media (max-width: 1024px) {
  body.gt-design-system-v1 {
    --gt-ds-section: 48px;
    --gt-ds-section-accent: 48px;
    --gt-ds-section-compact: 24px;
    --gt-ds-heading-gap: 24px;
    --gt-ds-panel-padding: 24px;
  }
  body.gt-design-system-v1 main.face-hub .face-masters > .face-heading > h3 {
    font-size: 24px;
  }
}

@media (max-width: 820px) {
  body.gt-design-system-v1 {
    --gt-type-breadcrumb-size: 11px;
  }
  body.gt-design-system-v1 main .container,
  body.gt-design-system-v1 .site-footer .container {
    width: calc(100% - 32px);
  }
  body.gt-design-system-v1.gt-typography-v1 main#primary.gt-app .gt-app__intro > p.gt-app__fine {
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  body.gt-design-system-v1 {
    --gt-ds-section: 36px;
    --gt-ds-section-accent: 36px;
    --gt-ds-heading-gap: 20px;
    --gt-ds-gap: 12px;
    --gt-ds-card-padding: 16px;
    --gt-ds-card-radius: 20px;
    --gt-ds-panel-padding: 20px;
    --gt-ds-panel-radius: 24px;
    --gt-ds-note-size: 13px;
  }
  body.gt-design-system-v1 main :is(.spa-catalog, .face-catalog) {
    padding-top: 36px;
  }
  body.gt-design-system-v1 main.face-hub .face-masters > .face-heading > h3 {
    font-size: 22px;
  }
  body.gt-design-system-v1 main :is(.spa-interiors, .face-gallery__grid) {
    row-gap: 20px;
  }
  body.gt-design-system-v1 main.face-hub .face-masters {
    margin-top: 32px;
  }
  body.gt-design-system-v1 main.face-hub .face-course-teaser__body {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.gt-design-system-v1 :is(.btn, .wp-element-button, .wp-block-button__link),
  body.gt-design-system-v1 main :is(a.spa-program__image img, a.face-service__media img) {
    transform: none;
    transition: none;
  }
  body.gt-design-system-v1 main .gt-ds-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  body.gt-design-system-v1 main .gt-ds-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}