/* ==========================================================================
   Our Space Page (page-our-space.php)
   Reuses --dc-home-* variables from home-landing.css (enqueued alongside
   this file). Structure mirrors facilities-page.css (fac-*) under a
   space-* namespace: hero, content, gallery, CTA, lightbox.
   ========================================================================== */

.space-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--dc-home-navy);
  color: #fff;
}

.space-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.space-hero__media video,
.space-hero__media picture,
.space-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.space-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
}

.space-hero .dc-container {
  position: relative;
  z-index: 1;
  padding-top: 120px;
  padding-bottom: 56px;
}

.space-hero__content {
  max-width: 720px;
}

.space-hero__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-home-gold);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 16px;
}

.space-hero__title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  margin: 0 0 12px;
  color: #fff;
}

.space-hero__subtitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--dc-home-gold);
  margin: 0 0 8px;
}

.space-hero__description {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  margin: 0;
  max-width: 620px;
}

@media (max-width: 768px) {
  .space-hero { min-height: 320px; }
  .space-hero .dc-container { padding-top: 90px; padding-bottom: 36px; }
}

/* ── Content (native the_content() editorial styling) ───────────────── */

.space-content-section {
  background: #fff;
  padding: var(--dc-home-section-py) 0;
}

.space-content {
  max-width: 980px;
  margin: 0 auto;
  color: var(--dc-home-text);
}

/* Lead paragraph — the very first paragraph in the content acts as the
   page intro (matches how the admin already writes it: one summary
   sentence right under the H1). Centered, larger, calmer measure. */
.space-content > .wp-block-heading:first-child + .wp-block-paragraph:first-of-type,
.space-content > h1:first-child + p:first-of-type {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
  font-size: 18px;
  line-height: 1.8;
  color: var(--dc-home-text);
}

.space-content h1.wp-block-heading {
  text-align: center;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  color: var(--dc-home-olive);
  margin: 0 0 20px;
}

/* Zone headings ("Our Space | บรรยากาศภายนอก" etc.) — treated as section
   breaks: gold eyebrow rule above, generous top spacing so each zone
   reads as its own block instead of a continuous wall of text. */
.space-content h3.wp-block-heading {
  position: relative;
  margin: 64px 0 12px;
  padding-top: 28px;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  color: var(--dc-home-olive);
}

.space-content h3.wp-block-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--dc-home-gold);
  border-radius: 2px;
}

.space-content > h3.wp-block-heading:first-of-type {
  margin-top: 8px;
}

/* Closing statement ("CARE IN EVERY DETAIL") — the final H2 in the
   content is styled as a callout rather than another zone heading. */
.space-content h2.wp-block-heading {
  text-align: center;
  max-width: 760px;
  margin: 72px auto 12px;
  padding-top: 32px;
  border-top: 1px solid var(--dc-home-border);
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 700;
  color: var(--dc-home-olive);
}

.space-content h2.wp-block-heading + p.wp-block-paragraph {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  color: var(--dc-home-text-light);
}

.space-content p.wp-block-paragraph {
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 24px;
}

.space-content p.wp-block-paragraph:empty {
  display: none;
}

/* Images — the admin enters these as one figure per line; instead of
   stacking every photo full-width, let consecutive image figures wrap
   into an even gallery row. This is content-shape-agnostic: it works
   however many images appear in a row, in any order, without needing to
   know where one "zone" ends and the next begins. */
.space-content .wp-block-image,
.space-content .wp-block-columns {
  display: inline-block;
  vertical-align: top;
  width: clamp(260px, 46%, 470px);
  margin: 0 10px 20px 0;
}

.space-content .wp-block-columns {
  width: 100%;
  display: flex;
  gap: 10px;
  margin-right: 0;
}

.space-content .wp-block-columns .wp-block-column {
  flex: 1 1 0;
}

.space-content .wp-block-columns .wp-block-image {
  width: 100%;
  margin: 0 0 10px;
}

.space-content .wp-block-image img,
.space-content .wp-block-columns img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: var(--dc-home-radius, 12px);
  cursor: zoom-in;
  transition: transform 0.4s ease;
}

.space-content .wp-block-image:hover img,
.space-content .wp-block-columns img:hover {
  transform: scale(1.02);
}

.space-content figcaption {
  font-size: 12px;
  color: var(--dc-home-text-light);
  margin-top: 6px;
}

@media (max-width: 768px) {
  .space-content-section { padding: var(--dc-home-section-py-mobile) 0; }
  .space-content h3.wp-block-heading { margin: 44px 0 10px; }
  .space-content .wp-block-image,
  .space-content .wp-block-columns {
    width: 100%;
    margin: 0 0 16px;
  }
  .space-content .wp-block-columns { flex-direction: column; }
  .space-content .wp-block-image img,
  .space-content .wp-block-columns img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ── Optional supplementary gallery (Page Gallery field) ─────────────── */

.space-gallery-section {
  background: var(--dc-home-cream);
  padding: var(--dc-home-section-py) 0;
}

.space-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.space-gallery__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--dc-home-radius, 12px);
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: zoom-in;
  background: var(--dc-home-cream-dark);
}

.space-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.space-gallery__thumb:hover img {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .space-gallery-section { padding: var(--dc-home-section-py-mobile) 0; }
  .space-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ── CTA ──────────────────────────────────────────────────────────────── */

.space-cta {
  background: var(--dc-home-olive);
  padding: 56px 0;
}

.space-cta__inner {
  text-align: center;
}

.space-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.space-cta__btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 32px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.space-cta__btn--primary {
  background: var(--dc-home-gold);
  color: #fff;
}

.space-cta__btn--primary:hover {
  background: #93764f;
}

.space-cta__btn--outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
}

.space-cta__btn--outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

/* ── Lightbox ─────────────────────────────────────────────────────────── */

.space-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.space-lightbox[hidden] {
  display: none;
}

.space-lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
}

.space-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.space-lightbox__close:hover {
  background: rgba(255,255,255,0.3);
}