/*
 Theme Name:   Botiga Child - Malibu Ceramic Works
 Theme URI:    https://malibuceramicworks.com
 Description:  Custom child theme for Malibu Ceramic Works. Adds premium tile brand styling on top of Botiga Pro.
 Author:       BlueBox Interactive
 Template:     botiga
 Version:      1.0.0
 License:      Private
*/

/* ============================================================
   MCW DESIGN SYSTEM - CSS Custom Properties
   ============================================================ */
:root {
  --mcw-cream: #FAF6EF;
  --mcw-sand: #F0EADD;
  --mcw-warm-white: #FDFBF7;
  --mcw-charcoal: #2A2622;
  --mcw-dark: #1C1917;
  --mcw-stone: #7A7267;
  --mcw-clay: #C4956A;
  --mcw-terra: #C2703E;
  --mcw-cobalt: #2B5A8C;
  --mcw-ocean: #3B7A9E;
  --mcw-sage: #6B8F71;
  --mcw-golden: #D4A843;
  --mcw-light-stone: #D8D0C4;
  --mcw-serif: 'Playfair Display', Georgia, serif;
  --mcw-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}


/* ============================================================
   GLOBAL OVERRIDES
   ============================================================ */
body {
  background-color: var(--mcw-warm-white);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   HEADER REFINEMENTS
   ============================================================ */
.bhfb-header {
  background: rgba(253,251,247,0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}


/* ============================================================
   BUTTONS - Global MCW Style
   ============================================================ */
.mcw-btn-primary,
.wp-block-button.mcw-btn-primary .wp-block-button__link {
  font-family: var(--mcw-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 17px 38px !important;
  background: var(--mcw-terra) !important;
  color: white !important;
  border: none !important;
  border-radius: 0 !important;
  transition: all 0.35s ease !important;
}
.mcw-btn-primary:hover,
.wp-block-button.mcw-btn-primary .wp-block-button__link:hover {
  background: #A85C30 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(194,112,62,0.35);
}

.mcw-btn-secondary,
.wp-block-button.mcw-btn-secondary .wp-block-button__link {
  font-family: var(--mcw-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 17px 38px !important;
  background: transparent !important;
  color: white !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  border-radius: 0 !important;
  transition: all 0.3s !important;
}
.mcw-btn-secondary:hover,
.wp-block-button.mcw-btn-secondary .wp-block-button__link:hover {
  border-color: white !important;
  background: rgba(255,255,255,0.08) !important;
}

.mcw-btn-dark,
.wp-block-button.mcw-btn-dark .wp-block-button__link {
  background: var(--mcw-charcoal) !important;
  color: white !important;
  border: none !important;
  border-radius: 0 !important;
}
.mcw-btn-dark:hover,
.wp-block-button.mcw-btn-dark .wp-block-button__link:hover {
  background: var(--mcw-dark) !important;
}


/* ============================================================
   SECTION LABELS & TYPOGRAPHY
   ============================================================ */
.mcw-eyebrow {
  font-family: var(--mcw-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--mcw-terra) !important;
  margin-bottom: 20px !important;
}

.mcw-eyebrow-light {
  color: var(--mcw-golden) !important;
}

.mcw-heading-serif {
  font-family: var(--mcw-serif) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--mcw-charcoal) !important;
}

.mcw-heading-white {
  color: white !important;
}

.mcw-body-text {
  font-family: var(--mcw-sans) !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: var(--mcw-stone) !important;
}

.mcw-body-light {
  color: rgba(255,255,255,0.8) !important;
}


/* ============================================================
   HERO SECTION
   ============================================================ */
.mcw-hero {
  min-height: 94vh !important;
  display: flex !important;
  align-items: center !important;
}
.mcw-hero .wp-block-cover__inner-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}
.mcw-hero .has-background-dim::before {
  background: linear-gradient(110deg, rgba(28,25,23,0.78) 0%, rgba(28,25,23,0.45) 45%, rgba(28,25,23,0.1) 80%) !important;
}
.mcw-hero h1 {
  font-family: var(--mcw-serif) !important;
  font-size: clamp(44px, 5.5vw, 78px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  max-width: 720px !important;
}
.mcw-hero h1 em {
  font-style: italic;
  color: var(--mcw-golden);
}


/* ============================================================
   INTRO SECTION
   ============================================================ */
.mcw-intro {
  padding: 100px 48px !important;
  background: var(--mcw-warm-white) !important;
  text-align: center;
}
.mcw-intro > .wp-block-group__inner-container {
  max-width: 780px;
  margin: 0 auto;
}


/* ============================================================
   COLLECTION CARDS
   ============================================================ */
.mcw-collections-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  max-width: 1440px;
  margin: 0 auto;
}
.mcw-collections-grid .wp-block-cover:nth-child(4) {
  grid-column: 1 / 2;
}
.mcw-collections-grid .wp-block-cover:nth-child(5) {
  grid-column: 2 / 4;
}

.mcw-collection-card {
  aspect-ratio: 1/1 !important;
  min-height: 0 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  cursor: pointer;
}
.mcw-collection-card:nth-child(5) {
  aspect-ratio: 2/1 !important;
}
.mcw-collection-card img {
  transition: transform 0.7s ease !important;
}
.mcw-collection-card:hover img {
  transform: scale(1.06) !important;
}
.mcw-collection-card .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}
.mcw-collection-card .has-background-dim::before {
  background: linear-gradient(to top, rgba(28,25,23,0.72) 0%, rgba(28,25,23,0.0) 55%) !important;
}

.mcw-card-label {
  font-family: var(--mcw-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  margin-bottom: 4px !important;
}

.mcw-card-title {
  font-family: var(--mcw-serif) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: white !important;
}


/* ============================================================
   HERITAGE SECTION
   ============================================================ */
.mcw-heritage {
  padding: 120px 48px !important;
  background: var(--mcw-sand) !important;
}
.mcw-heritage > .wp-block-group__inner-container {
  max-width: 1440px;
  margin: 0 auto;
}
.mcw-heritage .wp-block-columns {
  gap: 80px !important;
  align-items: center !important;
}
.mcw-heritage img {
  border-radius: 4px;
}


/* ============================================================
   VALUE PROPS
   ============================================================ */
.mcw-values {
  padding: 100px 48px !important;
  background: var(--mcw-warm-white) !important;
}

.mcw-value-card {
  text-align: center;
  padding: 40px 24px !important;
  background: var(--mcw-cream) !important;
  border-radius: 6px !important;
  transition: transform 0.3s, box-shadow 0.3s;
}
.mcw-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.06);
}

.mcw-value-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 28px;
}
.mcw-vi-cobalt { background: rgba(43,90,140,0.1); color: var(--mcw-cobalt); }
.mcw-vi-terra { background: rgba(194,112,62,0.1); color: var(--mcw-terra); }
.mcw-vi-sage { background: rgba(107,143,113,0.1); color: var(--mcw-sage); }
.mcw-vi-golden { background: rgba(212,168,67,0.1); color: var(--mcw-golden); }


/* ============================================================
   INSPIRATION GALLERY
   ============================================================ */
.mcw-inspiration {
  padding: 100px 48px !important;
  background: var(--mcw-sand) !important;
}

.mcw-inspiration-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr !important;
  grid-template-rows: 280px 280px !important;
  gap: 16px !important;
}
.mcw-inspiration-grid figure:first-child {
  grid-row: 1 / 3;
}
.mcw-inspiration-grid figure {
  border-radius: 4px;
  overflow: hidden;
  margin: 0 !important;
  position: relative;
}
.mcw-inspiration-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.mcw-inspiration-grid figure:hover img {
  transform: scale(1.05);
}

.mcw-insp-label {
  position: absolute !important;
  bottom: 16px !important;
  left: 16px !important;
  z-index: 2;
  font-family: var(--mcw-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: white !important;
  background: rgba(28,25,23,0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px !important;
  border-radius: 3px !important;
}


/* ============================================================
   PROCESS / HOW IT WORKS
   ============================================================ */
.mcw-process {
  padding: 100px 48px !important;
  background: var(--mcw-warm-white) !important;
}

.mcw-step-number {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--mcw-serif);
  font-size: 24px;
  font-weight: 500;
}
.mcw-sn-1 { background: rgba(43,90,140,0.1); color: var(--mcw-cobalt); border: 2px solid rgba(43,90,140,0.2); }
.mcw-sn-2 { background: rgba(194,112,62,0.1); color: var(--mcw-terra); border: 2px solid rgba(194,112,62,0.2); }
.mcw-sn-3 { background: rgba(212,168,67,0.1); color: var(--mcw-golden); border: 2px solid rgba(212,168,67,0.2); }
.mcw-sn-4 { background: rgba(107,143,113,0.1); color: var(--mcw-sage); border: 2px solid rgba(107,143,113,0.2); }


/* ============================================================
   FINAL CTA SECTION
   ============================================================ */
.mcw-final-cta {
  padding: 120px 48px !important;
  text-align: center;
}
.mcw-final-cta .has-background-dim::before {
  background: rgba(28,25,23,0.75) !important;
}
.mcw-final-cta .wp-block-cover__inner-container {
  max-width: 700px;
  margin: 0 auto;
}


/* ============================================================
   FOOTER
   ============================================================ */
.mcw-footer {
  background: var(--mcw-dark) !important;
}
.mcw-footer a {
  color: rgba(255,255,255,0.4) !important;
  transition: color 0.3s;
}
.mcw-footer a:hover {
  color: white !important;
}


/* ============================================================
   VIEW ALL LINK
   ============================================================ */
.mcw-view-all a {
  font-family: var(--mcw-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mcw-terra) !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid var(--mcw-terra) !important;
  padding-bottom: 3px;
  transition: all 0.3s;
}
.mcw-view-all a:hover {
  color: var(--mcw-charcoal) !important;
  border-color: var(--mcw-charcoal) !important;
}


/* ============================================================
   WOOCOMMERCE PRODUCT GRID REFINEMENTS
   ============================================================ */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--mcw-serif) !important;
  font-weight: 400 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .mcw-collections-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .mcw-collections-grid .wp-block-cover:nth-child(5) {
    grid-column: 1 / 3;
  }
  .mcw-inspiration-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 300px 300px !important;
  }
  .mcw-inspiration-grid figure:first-child {
    grid-row: auto;
  }
}

@media (max-width: 768px) {
  .mcw-hero { min-height: 80vh !important; }
  .mcw-hero .wp-block-cover__inner-container,
  .mcw-intro, .mcw-heritage, .mcw-values, .mcw-inspiration, .mcw-process, .mcw-final-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .mcw-collections-grid {
    grid-template-columns: 1fr !important;
  }
  .mcw-collections-grid .wp-block-cover:nth-child(5) {
    grid-column: 1;
  }
  .mcw-collection-card,
  .mcw-collection-card:nth-child(5) {
    aspect-ratio: 4/3 !important;
  }
  .mcw-inspiration-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .mcw-inspiration-grid figure {
    aspect-ratio: 16/10;
  }
}