/* DESIGNERO Core — frontend.css v0.2.0
 * Plugin-side styles for canonical components.
 * Font safety: always list UTM Avo as fallback so Vietnamese renders
 * correctly even when Baloo 2 is loading or unavailable.
 */

/* ---- CSS custom properties (per-page variant tokens) ---- */
:root {
  --designero-accent: #D45937;
  --designero-button: #D45937;
  --designero-active-color: #D45937;
  --designero-form-bg: #11120D;
  --designero-form-accent: #D45937;
  --designero-tab-active: #D45937;
  --designero-section-bg: #FFFBF4;
}

/* ================================================================
   BUTTON COMPONENT
   ================================================================ */
.designero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, color .2s ease, background .2s ease;
  /* Reserve space so 1.1× active scale doesn't shift siblings */
  min-width: 0;
  position: relative;
}

.designero-btn span {
  display: inline-block;
  transition: transform .2s ease;
}

/* Active state — font safety: UTM Avo fallback keeps Vietnamese readable */
.designero-btn.is-active,
.section-switcher-tab.is-active,
.section-switcher-level.is-active,
.townhouse-filter.is-active,
.designero-tabs-controls .is-active {
  font-size: 1.1em;
  /* Baloo 2 for active state, UTM Avo as immediate fallback for Vietnamese */
  font-family: 'Baloo 2', 'UTM Avo', Arial, sans-serif;
  color: var(--designero-active-color, #D45937);
  transition: font-size .2s ease, color .2s ease;
}

.designero-btn.is-active span {
  transform: scale(1.1);
  transform-origin: center;
}

/* ================================================================
   TABS COMPONENT
   ================================================================ */
.designero-tabs {
  width: min(1360px, 92%);
  margin-inline: auto;
}

.designero-tabs-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  /* Fixed row height prevents reflow when active tab scales font */
  min-height: 44px;
}

/* Tab buttons — pre-reserve width so 1.1× scale won't shift layout.
   JS (stabilizeTabWidths) adds inline min-width after font load. */
.designero-tabs-controls button,
.section-switcher-tab {
  position: relative;
  padding: 8px 16px;
  white-space: nowrap;
  /* Prevent box collapse on active */
  box-sizing: border-box;
}

/* Active tab doesn't shift: height is constrained by line-height + padding */
.section-switcher-tab.is-active {
  padding: 8px 16px;
}

.designero-tab-panel { display: none; }
.designero-tab-panel.is-active { display: block; }

/* ================================================================
   WORKING PROCESS
   ================================================================ */
.designero-working-process {
  width: min(1360px, 92%);
  margin-inline: auto;
}

.designero-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.designero-process-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(255, 251, 244, .9);
  border: 1px solid rgba(216, 207, 188, .55);
  padding: 20px;
}

.designero-process-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Font safety for h3 in process — Baloo 2 with UTM Avo fallback */
.designero-process-card h3 {
  font-family: 'Baloo 2', 'UTM Avo', Arial, sans-serif;
  font-weight: 700;
}

/* ================================================================
   FEATURED PROJECTS
   ================================================================ */
.designero-featured-projects .project-card a {
  text-decoration: none;
  color: inherit;
}

/* ================================================================
   FEEDBACK SLIDER
   ================================================================ */
.designero-feedback-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.designero-feedback-card {
  background: rgba(255, 251, 244, .92);
  border: 1px solid rgba(216, 207, 188, .55);
  padding: 20px;
}

.designero-feedback-card img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
}

.designero-feedback-card blockquote { margin: 12px 0; }

.designero-feedback-card span {
  display: block;
  margin-top: 4px;
  color: var(--text, #565449);
}

/* ================================================================
   PARTNER LOGOS
   ================================================================ */
.designero-partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  align-items: center;
}

.designero-partner-logo {
  display: grid;
  min-height: 84px;
  place-items: center;
}

.designero-partner-logo img {
  max-width: 160px;
  max-height: 76px;
  width: auto;
  height: auto;
}

/* ================================================================
   VIDEO SHOWCASE
   ================================================================ */
.designero-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(980px, 100%);
  margin-inline: auto;
  background: #11120D;
}

.designero-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ================================================================
   MOBILE OVERRIDES
   ================================================================ */
@media (max-width: 980px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  .mobile-drawer {
    right: 0;
    left: auto;
    max-width: calc(100vw - 32px);
    contain: paint;
  }

  .staff-slider-container {
    max-width: 100%;
    overflow: hidden;
  }

  /* Tab controls wrap cleanly on mobile */
  .designero-tabs-controls {
    gap: 8px;
  }

  .designero-tabs-controls button,
  .section-switcher-tab {
    font-size: 13px;
    padding: 6px 12px;
  }
}
.home main{overflow-x:hidden}
/* Gutenberg section background controls. Defaults remain inactive until an editor sets a value. */
.figma-page section.designero-has-custom-background{position:relative;isolation:isolate;min-height:var(--designero-min-height,initial)}
.figma-page section.designero-has-custom-background::before,.figma-page section.designero-has-custom-background::after{content:"";position:absolute;inset:0;pointer-events:none}
.figma-page section.designero-has-custom-background::before{z-index:-2;background-color:var(--designero-bg-color,transparent);background-image:var(--designero-bg-image,none);background-size:var(--designero-bg-size,cover);background-position:var(--designero-bg-position,center center);background-repeat:var(--designero-bg-repeat,no-repeat);opacity:var(--designero-bg-opacity,1)}
.figma-page section.designero-has-custom-background::after{z-index:-1;background:var(--designero-overlay-color,transparent);opacity:var(--designero-overlay-opacity,0)}

/* Per-section Gutenberg controls. Empty variables preserve the approved UI. */
.designero-page-content section {
  color: var(--designero-text-color, inherit);
  font-family: var(--designero-body-font, inherit);
  font-size: var(--designero-body-size, inherit);
}
.designero-page-content section :is(h1, h2, h3, h4, h5, h6) {
  color: var(--designero-heading-color, inherit);
  font-family: var(--designero-heading-font, inherit);
  font-size: var(--designero-heading-size, inherit);
}
.designero-section-extra-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;padding-top:32px;padding-bottom:32px}.designero-section-extra-item img{width:100%;aspect-ratio:4/3;object-fit:cover}.designero-section-extra-item h3{margin:14px 0 8px}.designero-section-extra-item a{display:inline-block;margin-top:10px;color:var(--designero-block-accent,#d45937)}
.designero-project-card-link{display:block;width:100%;height:100%;color:inherit;text-decoration:none}
.designero-project-banner-link{display:block;width:100%;height:100%}.designero-project-banner-link img{width:100%;height:100%;object-fit:cover}