/* Visual-parity port of the legacy site (thaihousewares.com).
 * Colors, fonts, and layout measurements come from the legacy assets/style.css
 * and Bootstrap defaults it relied on — see ../design.md. No Bootstrap/jQuery/
 * Slick shipped; same visual output, hand-written.
 * Hero identity = static/img/bg_main_logo.jpg (red curtain + logo tab + doodles),
 * exactly as the legacy .fix-static did. */
/* tokens.css + Google Fonts moved to <link> tags in layout.html — @import here
   chained the requests serially and blocked first paint ~1.8s on mobile. */

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
/* every <img> ships width/height attributes (CLS: the browser reserves the box
   before load). height:auto keeps the ratio when CSS then narrows the width —
   without it the height ATTRIBUTE wins and photos stretch. More specific rules
   (.banner-track img etc.) still override this on purpose. */
img { max-width: 100%; height: auto; }
body {
  margin: 0;
  font-family: "Source Sans Pro", "Kanit", sans-serif; /* Thai glyphs fall through to Kanit, as legacy */
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-page-bg);
  line-height: 1.5;
}
h1, h2, h3, h4, h5 { font-weight: 400; line-height: 1.3; margin: 0 0 .5rem; overflow-wrap: anywhere; }
h1 { font-size: 2.2rem; }
h3 { font-size: 1.55rem; }
h4 { font-size: 1.35rem; }
h5 { font-size: 1.15rem; }
a { color: var(--color-ink); text-decoration: none; transition: color .3s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.text-center { text-align: center; }
.text-white { color: var(--color-white); }
.rounded { border-radius: .25rem; }
hr { border: 0; border-top: 1px solid rgba(0,0,0,.1); margin: 1rem 0; }
/* <picture> is layout-transparent so existing `... img` sizing rules apply to
   the inner <img> exactly as before the WebP <picture> wrap. */
picture { display: contents; }

.container { max-width: 1110px; margin: 0 auto; padding: 0 15px; }

/* ---------- Desktop hero (legacy .fix-static, bg carries the whole identity) ---------- */
.hero {
  position: relative;
  max-width: 1440px;
  aspect-ratio: 1440 / 950; /* overlay positions below are % of this canvas */
  margin: 0 auto;
  background: url("img/bg_main_logo.jpg") no-repeat center top;
  background-size: cover;
}
.hero-title {
  position: absolute;
  top: 1.3%;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  color: var(--color-white);
  font-size: .95rem;
}
.hero .menu {
  position: absolute;
  top: 31.5%;
  left: 25.7%;   /* 370px @1440 — clears the logo tab baked into the bg */
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.hero .menu a, .hero .lang a {
  color: var(--color-white);
  font-weight: 700;
  padding-bottom: 3px;
}
.hero .menu a:hover, .hero .lang a:hover { color: var(--color-yellow); }
.hero .menu a.active, .hero .lang a.active { border-bottom: 2px solid var(--color-white); }
.hero .lang {
  position: absolute;
  top: 31.5%;
  right: 17%;    /* 245px @1440 */
  display: flex;
  gap: 15px;
}
.block-banner {
  position: absolute;
  top: 37.9%;               /* 360px @1440 */
  left: 50%;
  transform: translateX(-50%);
  width: 75%;               /* 1080px @1440 */
  height: 40.5%;            /* 385px @950 */
  background: var(--color-grey);
  border: 10px solid var(--color-white);
  overflow: hidden;
}
.banner-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; }
.banner-track a, .banner-track > img { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.banner-track img { width: 100%; height: 100%; object-fit: contain; background: var(--color-white); display: block; }
.block-banner .company-banner { width: 100%; height: 100%; object-fit: contain; background: var(--color-white); display: block; }

/* content floats up over the curtain, as legacy .float-section
   (-150px @1440 viewport; scales with the hero below that) */
.float-section { position: relative; margin-top: max(-150px, -10.42vw); padding-bottom: 1rem; }

/* ---------- Mobile nav: hamburger, CSS-only (shown under 1080px) ---------- */
.mobile-nav { display: none; }
.mnav-burger { display: none; }

/* ---------- Grid (bootstrap-like) ---------- */
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.row > [class^="col-"] { padding: 0 15px; width: 100%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.section-gap { margin-top: 3rem; }

/* ---------- Cards (bootstrap look the legacy relied on) ---------- */
.card {
  background: var(--color-white);
  border: 1px solid rgba(0,0,0,.03);
  border-radius: 5px;
}
.card-header {
  padding: .75rem 1.25rem;
  background: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.125);
  color: var(--color-ink);
  text-align: center;
  border-radius: 5px 5px 0 0;
}
.card-body { padding: 1.25rem; }
.card-body.pad-lg { padding: 3rem; }
.card > .card-body:last-child, .border-bottom-radius { border-radius: 0 0 5px 5px; }

.bg-purple { background: var(--color-purple); color: var(--color-white); }
.bg-purple-strip { background: var(--color-purple-dark); color: var(--color-white); }
.bg-grey { background: var(--color-grey); }
.font-yellow { color: var(--color-yellow); }

/* ---------- Home: scheduling-style event blocks (big date, icon rows) ---------- */
.sched { text-align: left; }
.sched-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sched-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 0; }
.sched-date { flex: 0 0 auto; text-align: right; }
.sched-dow { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.sched-dm { display: block; font-size: 1.65rem; font-weight: 600; line-height: 1.15; color: var(--color-yellow); white-space: nowrap; }
.sched-desc {
  background: rgba(0, 0, 0, .18);   /* fills the reference design's photo slot */
  border-radius: 8px;
  padding: .7rem .9rem;
  margin: .8rem 0 .2rem;
  font-size: .9rem;
  line-height: 1.55;
  opacity: .95;
}
.sched-row { display: flex; align-items: flex-start; gap: 8px; margin-top: .5rem; font-size: .9rem; opacity: .92; }
.sched-row svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; }
.sched-cta { text-align: center; margin-top: 1rem; }
.bg-purple a:not(.btn), .bg-purple-strip a:not(.btn), .bg-grey a:not(.btn) { color: var(--color-white); }

/* ---------- Buttons (legacy .btn-primary: dark fill, light-blue text, pill) ---------- */
.btn {
  display: inline-block;
  background: var(--color-ink);
  color: var(--color-btn-accent) !important;
  border: 1px solid var(--color-ink);
  padding: .375rem 1.5rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  margin-top: .75rem;
  transition: background-color .2s ease;
}
.rounded-pill { border-radius: 50rem; }
.btn-wide { padding-left: 3rem; padding-right: 3rem; }
.btn:hover { background: #000; }

/* ---------- Forms (legacy bootstrap form-group row: label 1/3 + field 2/3) ---------- */
.form-row { display: flex; align-items: flex-start; margin-bottom: 1rem; }
.form-row label { flex: 0 0 33.3333%; padding-top: .45rem; text-align: left; }
.form-row .form-field { flex: 0 0 66.6667%; max-width: 66.6667%; }
input[type="text"], select {
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

/* ---------- Home: member-logo marquee (full-width endless strip) ----------
   Pure CSS: the template renders the 12 logos twice; the track slides exactly
   one set's width (12 tiles + 12 gaps) then loops — seamless. Tile width is a
   %% of the track, and the track's own width equals the container, so the
   shift distance is expressible in %% + px: 12 × (100%/6 + 5px) = 200% + 60px. */
/* bleed over the container's 15px side padding so the strip lines up with the
   footer card's visible edge */
.logo-slider { overflow: hidden; margin: 1.5rem -15px; }
.logo-track {
  display: flex;
  gap: 30px;
  --marquee-shift: calc(-200% - 60px);
  animation: logo-marquee 45s linear infinite;
}
.logo-slider:hover .logo-track,
.logo-slider:focus-within .logo-track { animation-play-state: paused; }
.logo-track > a { flex: 0 0 calc((100% - 150px) / 6); }  /* 6 per view, 5 gaps of 30px */
@keyframes logo-marquee { to { transform: translateX(var(--marquee-shift)); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }
.logo-track img, .logo-grid img { width: 100%; display: block; background: var(--color-white); }
/* logos come in wild aspect ratios (some portrait) — pin every slider tile to a
   square and letterbox the logo inside so the row height never jumps */
.logo-track img { aspect-ratio: 1; height: auto; object-fit: contain; }
.logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }

/* ---------- Member / event rows ---------- */
.member-row { display: flex; gap: 30px; margin-bottom: 1rem; }
.member-row .member-logo { flex: 0 0 25%; max-width: 25%; text-align: center; }
.member-row .member-logo img { width: 100%; }
.member-row .member-logo-name { margin-top: .25rem; font-size: .95rem; }
.member-row .member-body { flex: 1 1 auto; min-width: 0; }
.member-row h3 a { color: var(--color-ink); }
.member-row h3 a:hover { color: var(--color-purple); }
.mini-thumbs img { width: 80px; margin: 0 4px 4px 0; }

/* ---------- Member directory: compact card grid ---------- */
.result-count {
  display: inline-block;
  margin-left: 8px;
  background: var(--color-purple);
  color: var(--color-white);
  font-size: .8rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 10px;
  vertical-align: middle;
}
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--color-white);
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  color: var(--color-ink);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.member-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
  border-color: var(--color-purple);
  transform: translateY(-3px);
  text-decoration: none;
}
/* the card itself is a div (thumbs need their own lightbox links inside);
   logo+name stay one big link */
.member-card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: inherit;
  flex: 1 1 auto;   /* thumbs strip pins to the card bottom */
}
.member-card-thumbs { display: flex; gap: 4px; width: 100%; justify-content: center; margin-top: auto; }
/* fixed 1/5 slot even when a company has fewer than 5 photos — keeps every
   card's strip the same scale */
.member-card-thumbs a { flex: 0 1 calc((100% - 16px) / 5); min-width: 0; }
.member-card-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;   /* tiny teaser squares; the lightbox shows the real ratio */
  border-radius: 4px;
  display: block;
}
.member-card-logo {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.member-card-logo img {
  max-width: 100%;
  max-height: 110px;
  width: auto;
  object-fit: contain;
}
.member-card-name {
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--color-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* always reserve two lines so a short name doesn't pull the thumb strip up —
     every card in a row keeps logo/name/thumbs on the same baselines */
  min-height: calc(2 * 1.35em);
}

/* ---------- Member detail ---------- */
.detail-grid { display: flex; flex-wrap: wrap; gap: 30px; }
.detail-grid > div:first-child { flex: 1 1 55%; min-width: 280px; }
.detail-grid .social-box { display: flex; align-items: flex-start; justify-content: flex-end; gap: 12px; flex: 1 1 35%; padding-top: 3rem; }
.social-object { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 8px; }
.social-object img { width: 80px; }
.icon-row { display: flex; align-items: center; gap: 20px; margin-top: 1rem; }
.icon-row img { width: 80px; flex: 0 0 auto; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 1rem; }
.photo-grid img { width: 100%; display: block; }

/* ---------- Footer (legacy white rounded container + icon row) ---------- */
.site-footer { margin-top: 1rem; }
.footer-box {
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: 15px;
  padding: 1.5rem 1rem;
  text-align: center;
}
.footer-box h5 { margin-bottom: .25rem; }
.footer-box p { margin: .25rem 0 1rem; }
.cta-bar { display: none; } /* mobile-only app-style bottom bar */
.footer-contact { display: flex; flex-wrap: wrap; }
.footer-contact div { flex: 1 1 33%; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 220px; padding: .5rem 0; }
.footer-contact img { flex: 0 0 auto; }
.footer-contact a { color: var(--color-ink); }
.copyright { text-align: center; font-size: 12px; margin: 50px 0; color: var(--color-ink); }

/* ---------- Responsive: below 1080px switch to the mobile shell ---------- */
@media (max-width: 1079px) {
  /* --- hamburger nav --- */
  .mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--color-white);
    padding: 8px 14px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .12);
  }
  .mnav-brand { display: flex; }
  .mnav-brand img { display: block; }
  .mnav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 40px;
    padding: 8px;
    cursor: pointer;
  }
  .mnav-burger span {
    display: block;
    height: 3px;
    width: 100%;
    background: var(--color-purple);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .mnav-panel { display: none; width: 100%; flex-direction: column; }
  .mnav-cb:checked ~ .mnav-panel { display: flex; }
  .mnav-panel a {
    padding: 13px 4px;
    border-top: 1px solid #eee;
    color: var(--color-ink);
    font-weight: 600;
  }
  .mnav-panel a.active { color: var(--color-purple); }
  .mnav-cb:checked ~ .mnav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .mnav-cb:checked ~ .mnav-burger span:nth-child(2) { opacity: 0; }
  .mnav-cb:checked ~ .mnav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* --- hero: drop the desktop bg + its aspect-ratio (was leaving an empty
     grey band because aspect-ratio kept the box tall even with bg:none) --- */
  .hero { height: auto; aspect-ratio: auto; background: none; max-width: none; }
  .hero-title, .hero .menu, .hero .lang { display: none; }
  .block-banner {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    background: transparent;
    border: none;
  }
  .banner-track { height: auto; }
  .banner-track a, .banner-track > img { flex-basis: 100%; }
  .banner-track img, .block-banner .company-banner { height: auto; }
  .float-section { margin-top: 1rem; }

  /* --- layout stacking --- */
  .col-4, .col-8 { flex: 0 0 100%; max-width: 100%; }
  .col-4 + .col-8, .col-8 + .col-4 { margin-top: 1rem; }
  .card-body.pad-lg { padding: 1.25rem; }
  .member-row { flex-direction: column; }
  .member-row .member-logo { max-width: 50%; margin: 0 auto; }
  .mini-thumbs { text-align: center; }
  .detail-grid .social-box { justify-content: flex-start; padding-top: 0; }
  .icon-row { gap: 12px; margin-top: .75rem; }
  .icon-row img { width: 40px; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* 2 per view on mobile → one set = 12 × (50% + 15px) */
  .logo-track > a { flex-basis: calc((100% - 30px) / 2); }
  .logo-track { --marquee-shift: calc(-600% - 180px); }
  .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .member-card { padding: 14px 10px; }
  .member-card-logo { height: 84px; }
  .member-card-logo img { max-height: 84px; }
  .form-row { flex-direction: column; }
  .form-row label, .form-row .form-field { flex: 1 1 auto; max-width: none; width: 100%; }
  /* --- footer: compact contact rows --- */
  .footer-contact div { flex: 1 1 100%; justify-content: flex-start; min-width: 0; padding: .35rem 0; }
  .footer-contact img { width: 36px; height: 36px; }
  .footer-contact a { overflow-wrap: anywhere; }

  /* --- app-style CTA bar fixed to the bottom edge --- */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .cta-bar {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    background: var(--color-white);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .cta-bar a {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    border-radius: 50rem;
    padding: 11px 10px;
    line-height: 1;
  }
  .cta-call { background: var(--color-purple); color: var(--color-white); }
  .cta-mail { border: 2px solid var(--color-purple); color: var(--color-purple); }
}

/* ---------- Lightbox (vanilla port of the legacy lightbox2 look) ---------- */
.lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .85);
  align-items: center;
  justify-content: center;
}
.lb-overlay.lb-open { display: flex; }
.lb-figure { margin: 0; max-width: 90vw; max-height: 88vh; }
.lb-img {
  max-width: 90vw;
  max-height: 88vh;
  display: block;
  background: var(--color-white);
  padding: 6px;
  border-radius: 4px;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  padding: 10px 16px;
}
.lb-close { top: 10px; right: 14px; font-size: 2.4rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 3.2rem; }
.lb-prev { left: 6px; }
.lb-next { right: 6px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: var(--color-yellow); }
.lb-counter {
  position: absolute;
  bottom: 14px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #ccc;
  font-size: .9rem;
}

/* ---------- PDPA consent banner ---------- */
.consent-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 900;
  width: min(680px, calc(100vw - 32px));
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.consent-banner p { margin: 0; flex: 1 1 300px; font-size: .95rem; }
.consent-actions { display: flex; gap: 10px; }
.consent-banner button {
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 50rem;
  padding: 8px 20px;
  cursor: pointer;
  border: 1px solid var(--color-ink);
}
.consent-accept { background: var(--color-ink); color: var(--color-btn-accent); }
.consent-decline { background: var(--color-white); color: var(--color-ink); }

/* mobile: lift the banner clear of the fixed CTA bar (must come AFTER the
   base .consent-banner rule — same specificity, last one wins) */
@media (max-width: 1079px) {
  .consent-banner { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}