/* Customer revisions applied on top of the approved design. */

/* Top bar: language switch next to the phone number */
.topbar-right{display:flex;align-items:center;gap:18px}
.lang-switch{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.08);color:#d9f0e6;font:600 .72rem var(--sans);cursor:pointer}
.lang-switch:hover{background:rgba(255,255,255,.16)}
.lang-switch i{margin:0}
.lang-switch b{opacity:.55;font-weight:600}
.lang-switch b.on{opacity:1;color:#fff}

/* Hero: larger intro text, photo instead of the quote card */
.hero-copy{max-width:640px;font-size:1.3rem;line-height:1.8}
.hero-photo{flex:0 0 min(460px,40%);align-self:center;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lift);border:6px solid rgba(255,255,255,.9)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.hero-photo{display:none}}
@media(max-width:680px){.hero-copy{font-size:1.05rem}}

/* Services preview: larger text */
.service-card{min-height:360px}
.service-card h3{font-size:1.4rem}
.service-card p{font-size:1.02rem;line-height:1.75}
.service-card .card-link{font-size:.95rem}
.service-card .service-number{font-size:.95rem}
.service-card .service-icon{width:64px;height:64px;font-size:1.5rem}
@media(max-width:680px){.service-card{min-height:260px}.service-card h3{font-size:1.2rem}}

/* Section spacing for the compact home page */
.home-section{padding:70px 0}

/* Scrolling image strip (replaces the text chips) */
.logo-chip-img{padding:8px;border-radius:18px}
.logo-chip-img img{display:block;width:150px;height:96px;object-fit:cover;border-radius:12px}
@media(max-width:680px){.logo-chip-img img{width:120px;height:78px}}

/* Contact call-to-action */
.cta-lines{list-style:none;margin:18px 0 0;padding:0;display:flex;gap:10px 26px;flex-wrap:wrap}
.cta-lines a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:1rem}
.cta-lines a:hover{text-decoration:underline}

/* Footer reduced to the bottom bar */
.footer.footer-slim{padding-top:0}
.footer-slim .footer-bottom{border-top:0;padding:26px 0}

/* Product "inquire" button rendered as a link */
a.product-add{text-decoration:none}

/* Home: "Services specialist" cards (replaced the testimonials) */
.specialist-grid{margin-top:8px}
.specialist-card{text-align:center;padding:34px 26px}
.specialist-icon{width:58px;height:58px;margin:0 auto 18px;border-radius:16px;display:grid;place-items:center;background:var(--mint);color:var(--green);font-size:1.4rem}
.specialist-card h3{font:700 1rem var(--sans);letter-spacing:.08em;color:var(--dark);margin-bottom:6px}
.specialist-card b{display:block;font-size:.98rem;color:var(--ink);margin-bottom:12px}
.specialist-card ul{list-style:none;padding:0;margin:0;font-size:.86rem;color:#3d4a44;line-height:1.8}

/* Home: tighter vertical rhythm between sections (was ~170-230px between blocks) */
body[data-page="home"] .section{padding:64px 0}
body[data-page="home"] .home-section{padding:0}
body[data-page="home"] .home-section .catalog-help-banner{margin-top:0}
body[data-page="home"] .process-section{padding:64px 0}
body[data-page="home"] .cta-section{padding:0 0 64px}
body[data-page="home"] .section-heading.center-only{margin-bottom:28px}
@media (max-width:680px){
  body[data-page="home"] .section{padding:44px 0}
  body[data-page="home"] .process-section{padding:44px 0}
  body[data-page="home"] .cta-section{padding:0 0 44px}
}

/* ---------- Photo albums (กิจกรรม, บริการ, หน้าแรก) ---------- */
.album-list{display:flex;flex-direction:column;gap:56px}
.album-block + .album-block{margin-top:44px}
.album-list .album-block + .album-block{margin-top:0}
.album-head{margin-bottom:18px;max-width:820px}
.album-head h2,.album-head h3{color:var(--dark);margin:6px 0 8px;line-height:1.35}
.album-head h2{font-size:clamp(1.4rem,2.4vw,2rem)}
.album-head h3{font-size:clamp(1.15rem,1.8vw,1.4rem)}
.album-head p{color:var(--muted);margin:0;font-size:.92rem}
.album-date{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--green);background:var(--mint);padding:4px 12px;border-radius:var(--r-pill)}
.album-empty{text-align:center;color:var(--muted);padding:40px 0}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.gallery-item{position:relative;display:block;padding:0;border:0;border-radius:var(--r-sm);overflow:hidden;cursor:zoom-in;background:var(--mint);aspect-ratio:4/3}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-item:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gallery-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,83,62,.62);color:#fff;font:700 1.6rem var(--sans)}

/* Activities page: first photo large */
.gallery-feature{grid-template-columns:repeat(4,1fr)}
.gallery-feature .gallery-item:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
/* Home: one large photo + four small */
.gallery-mosaic{grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,1fr)}
.gallery-mosaic .gallery-item{aspect-ratio:auto;min-height:150px}
.gallery-mosaic .gallery-item:first-child{grid-row:span 2;min-height:320px}
@media (max-width:900px){
  .gallery-feature{grid-template-columns:repeat(2,1fr)}
  .gallery-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .gallery-mosaic .gallery-item:first-child{grid-column:span 2;grid-row:auto;min-height:220px}
  .gallery-mosaic .gallery-item{min-height:120px}
}
@media (max-width:680px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .album-list{gap:40px}
}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(8,20,15,.94);display:flex;align-items:center;justify-content:center;padding:56px 70px}
.lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lightbox figcaption{color:#dfeee7;font-size:.88rem;text-align:center;display:flex;flex-direction:column;gap:4px}
.lightbox figcaption small{color:#9fb8ad}
.lightbox button{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.15rem;display:grid;place-items:center}
.lightbox button:hover{background:rgba(255,255,255,.24)}
.lightbox-close{top:16px;right:16px}
.lightbox-nav.prev{left:14px;top:50%;transform:translateY(-50%)}
.lightbox-nav.next{right:14px;top:50%;transform:translateY(-50%)}
@media (max-width:680px){
  .lightbox{padding:60px 8px}
  .lightbox-nav{top:auto!important;bottom:14px;transform:none!important}
}
.gallery-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.gallery-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.gallery-4{grid-template-columns:repeat(2,1fr)}}

/* ---------- Boot / loading screen (site and admin) ---------- */
.boot-loader{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--cream,#faf7f2);color:var(--dark,#07533e);font-family:'Prompt',sans-serif;animation:boot-in .25s ease-out}
.boot-admin{background:linear-gradient(135deg,#07533e,#087b58);color:#fff}
.boot-mark{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;font-size:1.4rem;color:#fff;background:linear-gradient(135deg,#087b58,#07533e);box-shadow:0 12px 26px rgba(8,123,88,.3);animation:boot-pulse 1.4s ease-in-out infinite}
.boot-admin .boot-mark{background:#fff;color:#087b58;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.boot-brand{font:700 1.15rem 'DM Sans',sans-serif;letter-spacing:.12em;text-align:center}
.boot-brand small{display:block;font-size:.58rem;letter-spacing:.2em;margin-top:4px;opacity:.65;font-family:'Prompt',sans-serif}
.boot-bar{width:180px;height:4px;border-radius:4px;background:rgba(8,123,88,.15);overflow:hidden}
.boot-admin .boot-bar{background:rgba(255,255,255,.2)}
.boot-bar span{display:block;width:40%;height:100%;border-radius:4px;background:#087b58;animation:boot-slide 1.1s ease-in-out infinite}
.boot-admin .boot-bar span{background:#fff}
.boot-loader p{margin:0;font-size:.85rem;opacity:.75}
@keyframes boot-slide{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@keyframes boot-pulse{50%{transform:scale(.92)}}
@keyframes boot-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.boot-mark,.boot-bar span{animation:none}}
.boot-admin .boot-brand small{letter-spacing:.02em;font-size:.68rem}