/* =========================================================
   Thai Orchid Battle — hand-written, no frameworks
   Breakpoints match the original site: desktop ≥1025px,
   tablet 768–1024px, mobile ≤767px.
   ========================================================= */
:root{
  --text:#291012;
  --heading:#1b1314;
  --dark:#1b1314;
  --hero:#291012;
  --accent:#b22f1e;
  --accent-dark:#8f2416;
  --muted:#765155;
  --soft:#f9f6f7;
  --line:#3f3736;
  --serif:"Gilda Display", Georgia, "Times New Roman", serif;
  --sans:"Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --container:1290px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
picture source{display:none} /* otherwise it takes a cell when the picture sits in a grid */
a{color:var(--accent);text-decoration:underline;text-underline-offset:.1em}
a:hover{color:var(--accent-dark)}
h1,h2,h3{font-weight:400}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--accent);padding:10px 16px}
.skip-link:focus{left:16px;top:16px}

/* =========================== HEADER =========================== */
.site-header{position:absolute;top:0;left:0;right:0;z-index:10}
.site-header__top{display:none;height:65px}
.site-header__main{display:flex;align-items:center;justify-content:space-between;height:80px}
.site-title{
  font-size:25px;line-height:30px;text-transform:uppercase;
  color:#fff;text-decoration:none;
}
.site-title:hover{color:#fff}
.header-call{
  margin-left:auto;
  padding:16px 36px;
  border-radius:4px;
  font-size:15px;line-height:18px;letter-spacing:1px;
  color:#fff;text-decoration:none;
}
.header-call:hover{color:#fff;background:rgba(255,255,255,.08)}

/* =========================== HERO =========================== */
.hero{
  position:relative;
  min-height:750px;
  display:flex;align-items:center;
  padding:200px 0 160px;
  background:var(--hero) url("../images/hero.jpg") 79% 68%/cover no-repeat;
  background-image:image-set(url("../images/hero-1000.webp") type("image/webp"), url("../images/hero.jpg") type("image/jpeg"));
  color:#fff;
}
.hero__overlay{position:absolute;inset:0;background:var(--hero);opacity:.56}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:center}
.hero__title{
  font-family:var(--serif);
  font-size:48px;line-height:1.2;
  color:#fff;margin:0 0 .5em;
}
.hero__subtitle{margin:0 0 32px;color:var(--soft)}
.btn{
  display:inline-block;
  margin-left:20px;
  padding:16px 20px;
  border-radius:4px;
  background:var(--accent);
  color:#fff;
  font-size:18px;line-height:21.6px;letter-spacing:1px;
  text-decoration:none;
  transition:background .2s ease;
}
.btn:hover{background:var(--accent-dark);color:#fff}
.hero__aside p{
  margin:0;
  font-family:"Lora", Georgia, serif;
  font-size:20px;line-height:30px;
  color:var(--soft);
}

/* =========================== INTRO =========================== */
.intro{padding:64px 0 48px}
.intro__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:center}
.intro__logo{padding:0 10px}
.intro__logo img{width:100%;aspect-ratio:16/9;object-fit:cover}
.intro__text{
  margin:0 0 0 48px;
  font-family:"Playfair Display", Georgia, serif;
  font-size:20px;line-height:1.5;
  color:var(--heading);
}

/* =========================== MENUS =========================== */
.menus{background:var(--soft);padding:100px 0 90px}
.menus__inner{max-width:1140px;margin:0 auto}
.menus__heading{max-width:500px;margin:0 auto;padding:10px;text-align:center}
.eyebrow{
  margin:0 0 23px;
  font-family:var(--serif);
  font-size:21px;line-height:1;letter-spacing:1px;text-transform:uppercase;
  color:var(--accent);
}
.menus__title{margin:0 0 8px;font-family:var(--serif);font-size:40px;line-height:1;color:var(--heading)}
.menus__lead{margin:0 0 40px;text-align:center}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.menu-card{padding:10px;text-align:center}
.menu-card__img{width:200px;height:200px;margin:0 auto;border-radius:50%;overflow:hidden}
.menu-card__img img{width:100%;height:100%;object-fit:cover}
.menu-card__title{
  margin:7px 0 8px;
  font-family:var(--serif);
  font-size:25px;line-height:1;font-weight:700;
}
.menu-card__title a{color:var(--heading);text-decoration:none}
.menu-card__title a:hover{color:var(--accent)}
.menu-card__links{margin:0;line-height:1;color:var(--muted)}

/* =========================== CONTACT =========================== */
.contact{padding:104px 0 32px}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;align-items:start}
.contact__photo{padding-left:30px;margin-top:28px}
.contact__photo img{width:100%}
.contact__info{padding-right:30px}
.contact__info p{margin:0 0 32px}
.contact__info p:last-child{margin-bottom:0}
.contact__title{margin:0 0 .5em;font-family:var(--serif);font-size:28px;line-height:48px;color:var(--heading)}
.block-title{
  margin:0 0 10px;
  border-bottom:1px solid var(--muted);
  font-family:var(--serif);
  font-size:26px;line-height:60px;
  color:var(--heading);
}

/* =========================== ABOUT =========================== */
.about{background:var(--soft);padding:48px 0 64px}
.about__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;align-items:start}
.about__col{display:flex;flex-direction:column;padding-right:30px}
.about__col--side{padding:0 0 0 30px;margin-top:25px}
.about__col p{margin:0 0 32px}
.about__col p:last-child{margin-bottom:0}
.about__col h3{margin:1.5em 0 .5em;font-family:var(--serif);font-size:28px;line-height:1.5;color:var(--heading)}
.about__col h3:first-child{margin-top:0}

/* =========================== CAROUSELS (tablet & mobile) =========================== */
.carousel{display:none;position:relative;background:var(--dark);padding-bottom:30px}
.carousel__viewport{position:relative;height:300px;overflow:hidden;touch-action:pan-y}
.carousel__track{display:flex;height:300px;margin:0;padding:0;list-style:none;will-change:transform}
.carousel__track.is-animating{transition:transform .4s ease}
.carousel__slide{flex:0 0 auto;height:300px}
.carousel__slide img{width:auto;height:300px;max-width:80vw;object-fit:cover;user-select:none;-webkit-user-drag:none}
.carousel__arrow{
  position:absolute;top:50%;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:48px;padding:0;
  border:0;border-radius:3px;
  background:rgba(0,0,0,.8);color:#fff;opacity:.75;
  transform:translateY(-50%);
  cursor:pointer;
}
.carousel__arrow:hover,.carousel__arrow:focus-visible{opacity:1}
.carousel__arrow svg{width:20px;height:20px;fill:currentColor}
.carousel__arrow--prev{left:0}
.carousel__arrow--next{right:0}
/* 10px dots drawn inside 24px tap targets */
.carousel__dots{position:absolute;left:0;right:0;bottom:1px;display:flex;justify-content:center;padding:0 18px}
.carousel__dot{width:24px;height:24px;padding:7px;border:0;border-radius:50%;background:#000;background-clip:content-box;opacity:.5;cursor:pointer}
.carousel__dot.is-active{opacity:.75}

/* =========================== MOSAIC (desktop) =========================== */
.mosaic{background:var(--dark)}
.mosaic img{width:100%;object-fit:cover}
.mosaic__feature{display:grid;grid-template-columns:1fr 1fr;padding-top:16px}
.mosaic__big img{height:100%;aspect-ratio:3/2}
.mosaic__quad{display:grid;grid-template-columns:1fr 1fr}
.mosaic__quad img,.mosaic__row--4 img{aspect-ratio:3/2}
.mosaic__row{display:grid}
.mosaic__row--4{grid-template-columns:repeat(4,1fr)}
.mosaic__row--3{grid-template-columns:repeat(3,1fr);padding-bottom:24px}
.mosaic__row--3 img{aspect-ratio:4/3}

/* =========================== MAP =========================== */
.map iframe{display:block;width:100%;height:450px;border:0}

/* =========================== FOOTER =========================== */
.site-footer{background:var(--dark);color:#fff}
.site-footer__cols{display:grid;grid-template-columns:repeat(3,1fr);column-gap:80px;padding-top:60px;padding-bottom:50px}
.site-footer__brand{text-align:center}
.site-footer__title{margin:0 0 20px;font-family:var(--serif);font-size:48px;line-height:1.5;color:#fff}
.site-footer__hygiene{display:inline-block}
.site-footer__hygiene img{width:278px}
.site-footer__photo--left{align-self:start;padding-top:9px}
.site-footer__photo--left img{width:305px}
.site-footer__photo--right{align-self:center;justify-self:end}
.site-footer__photo--right img{width:308px}
.site-footer__bottom{border-top:1px solid var(--line)}
.site-footer__bottom .container{padding-top:10px;padding-bottom:20px}
.site-footer__bottom p{display:flex;align-items:center;min-height:65px;margin:0}

/* =========================== TABLET (≤1024) =========================== */
@media (max-width:1024px){
  .site-header__top{display:block}
  .site-title{display:none}
  .header-call{font-size:18px;line-height:21.6px}

  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__aside{display:none}
  .hero__title{font-size:42.32px}

  .intro{padding:144px 0 132px}
  .intro .container{padding:0 48px}
  .intro__logo{padding:0}
  .intro__text{font-size:18.85px}

  .menus{padding:80px 0}
  .menus__inner{max-width:700px}
  .eyebrow{margin-bottom:22px}
  .menus__title{font-size:34px}
  .menus__lead{margin-bottom:62px}
  .menu-grid{grid-template-columns:repeat(2,1fr);row-gap:62px}

  .contact__grid{grid-template-columns:1fr}
  .contact__photo{display:none}

  .about__grid{grid-template-columns:1fr;row-gap:32px}
  .about__col--side{margin-top:0}

  .carousel{display:block}
  .mosaic{display:none}

  .site-footer__cols{grid-template-columns:1fr;row-gap:48px;justify-items:center;text-align:center}
  .site-footer__title{font-size:42.32px}
  .site-footer__photo--left,.site-footer__photo--right{align-self:auto;justify-self:center;padding-top:0}
  .site-footer__bottom .container{padding-bottom:52px}
  .site-footer__bottom p{justify-content:center}
}

/* =========================== MOBILE (≤767) =========================== */
@media (max-width:767px){
  .site-header__main{height:101px}
  .site-title{display:block;width:min-content;font-size:28px;line-height:33.6px}
  .header-call{width:min-content}

  .hero{padding:140px 0}
  .hero__grid{text-align:left}
  .hero__title{font-size:40px}

  .intro__grid{grid-template-columns:1fr}
  .intro__text{margin:32px 0 0 8px;font-size:17.6px}

  .menus{padding:60px 15px}
  .menus__title{font-size:30px}
  .eyebrow{font-size:20px}
  .menu-grid{grid-template-columns:1fr}
  .menu-card__title{font-size:23px}

  .contact__info{padding-right:0}
  .contact__title{font-size:24px}

  .about__col,.about__col--side{padding:0}
  .about__col h3{font-size:25px}

  .site-footer__title{font-size:36px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .carousel__track.is-animating{transition:none}
}