/* ==========================================================================
   PADDIO BANGNA — consumer single-page layer
   Loaded after shared/style.css and shared/brand.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 620px;
  background: var(--leaf-deep); overflow: hidden;
  display: flex; align-items: flex-end;
}
/* A real <img>, not a background-image. A CSS background cannot carry srcset, so
   the hero was the one image every phone downloaded at full width — 271 KB where
   84 KB would do, on the element that decides LCP. As an <img> it participates in
   srcset and <picture> like everything else. */
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.06);
  animation: kb 22s ease-in-out infinite alternate;
}
/* <picture> is an inline wrapper; it must not become the positioned box itself. */
.hero > picture { display: contents; }
@keyframes kb {
  0%   { transform: scale(1.06) translateY(0); }
  100% { transform: scale(1.14) translateY(-2%); }
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,32,23,.5) 0%, rgba(12,32,23,.12) 34%,
                                      rgba(12,32,23,.55) 76%, rgba(12,32,23,.9) 100%);
}
.hero-content {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw); margin: 0 auto; padding: 0 36px 88px; color: #fff;
}
.hero-kicker {
  display: block; font-size: 12.5px; font-weight: 500;
  letter-spacing: .38em; text-transform: uppercase;
  color: rgba(255,255,255,.8); margin: 26px 0;
}
.hero h1 {
  font-size: clamp(44px, 8.4vw, 118px); font-weight: 700;
  line-height: .96; letter-spacing: -.035em; margin-bottom: 20px; color: #fff;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--sage) 0%, var(--moss) 55%, var(--lime) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-tagline {
  font-size: clamp(17px, 2.2vw, 26px); font-style: italic;
  color: var(--lime); max-width: 640px; margin-bottom: 16px;
}
.hero p.lead {
  font-size: clamp(16px, 1.8vw, 19px); max-width: 600px; color: rgba(255,255,255,.84);
}
/* Thai sets much wider than Latin at the same tracking, and has no italic. */
html[lang="th"] .hero-kicker  { letter-spacing: .14em; text-transform: none; }
html[lang="th"] .hero h1      { font-size: clamp(36px, 6.6vw, 88px); line-height: 1.1; }
html[lang="th"] .hero-tagline { font-style: normal; }

@media (max-width: 760px) { .hero-content { padding: 0 20px 56px; } }

/* --------------------------------------------------------------------------
   FOUR PILLARS — Unwind / Recharge / Enjoy / Belong
   -------------------------------------------------------------------------- */
.pillars { background: var(--cream); position: relative; overflow: hidden; }
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; }
.pillar {
  background: #fff; border-radius: var(--radius); padding: 34px 28px 30px;
  border: 1px solid var(--line); position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pillar:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(21,71,52,.12); }
.pillar .n   { display: block; font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--leaf); margin-bottom: 20px; }
.pillar h3   { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
.pillar .sub { font-weight: 600; color: var(--leaf); font-size: 15px; margin-bottom: 10px; line-height: 1.4; }
.pillar p    { font-size: 14.5px; color: var(--muted); }
.pillar .cl  { position: absolute; right: -16px; bottom: -16px; width: 78px; height: 78px; opacity: .16; }
html[lang="th"] .pillar .n { letter-spacing: .06em; }

@media (max-width: 1000px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .pillar-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   FULL-BLEED PICTURE STRIP
   -------------------------------------------------------------------------- */
.strip { position: relative; height: 62vh; min-height: 380px; overflow: hidden; }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.strip .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 36px 44px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(12,32,23,.82));
}
.strip .cap .inner { max-width: var(--maxw); margin: 0 auto; }
.strip .cap h3 { color: #fff; font-size: clamp(22px, 3vw, 38px); margin: 0; }

/* --------------------------------------------------------------------------
   LOCATION
   -------------------------------------------------------------------------- */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.loc-points { list-style: none; display: grid; gap: 4px; margin-top: 28px; }
.loc-points li { padding: 17px 0; border-bottom: 1px solid var(--line); display: flex; gap: 16px; align-items: flex-start; }
.loc-points li:last-child { border-bottom: none; }
.loc-points .ic { flex-shrink: 0; width: 36px; height: 36px; background: var(--sage); color: var(--leaf-deep); border-radius: 10px; display: grid; place-items: center; font-weight: 700; }
.loc-points .t { font-weight: 600; color: var(--leaf-deep); margin-bottom: 2px; }
.loc-points .d { font-size: 14px; color: var(--muted); }

@media (max-width: 900px) { .loc-grid { grid-template-columns: 1fr; gap: 38px; } }

/* --------------------------------------------------------------------------
   GALLERY — a wide lead frame above a symmetrical three-up grid

   style.css lays .gal-grid out with CSS columns, which is masonry: every tile
   keeps its own aspect and the rows never line up. Here it is a real grid on a
   fixed 3:2 tile so all six read as one block. This file loads after
   style.css, so plain overrides win on equal specificity — no !important
   needed. Every source image is exported at 3:2 already, so object-fit has
   almost nothing left to crop.
   -------------------------------------------------------------------------- */
.gal-grid { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gal-grid .gal-item { margin: 0; break-inside: auto; }
.gal-grid .gal-item img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

.gal-lead { display: block; margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.gal-lead img { width: 100%; height: auto; display: block; transition: transform 1s var(--ease); }
.gal-lead:hover img { transform: scale(1.03); }

@media (max-width: 1000px) { .gal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .gal-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   ENQUIRE
   Contact rail: sales on the left with its label inline beside the phone
   number and email stacked beneath, LINE on the right with the QR under
   the pill it belongs to.
   -------------------------------------------------------------------------- */
.enq { background: var(--leaf-deep); color: #fff; position: relative; overflow: hidden; }
.enq .container { position: relative; z-index: 1; }
.enq h2 { color: #fff; }
.enq h2 em { color: var(--lime); }
.enq .eyebrow { color: var(--lime); }
.enq .body-lg { color: rgba(255,255,255,.8); }

.enq-contact { display: flex; flex-wrap: wrap; gap: 30px 48px; justify-content: center; align-items: flex-start; margin-top: 34px; }
.enq-contact .col { display: flex; flex-direction: column; gap: 14px; }
.enq-contact .col-sales { align-items: stretch; }
.enq-contact .col-line  { align-items: center; }
.enq-contact .sales-row { display: flex; align-items: center; gap: 14px; }   /* label LEFT of the number */
.enq-contact .lbl {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.62); white-space: nowrap;
}
.enq-contact .col-sales .btn { justify-content: center; }  /* both pills share one width */
html[lang="th"] .enq-contact .lbl { letter-spacing: .06em; text-transform: none; }

.line-qr { display: block; width: 132px; height: 132px; border-radius: 14px; background: #fff; padding: 9px; }
.line-qr img { width: 100%; height: 100%; display: block; }

@media (max-width: 560px) {
  .enq-contact .sales-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .enq-contact .lbl { text-align: center; }
}