/* =========================================================================
   Al-Andaluzza · Frame v3  (CEO 2026-05-15)
   ---------------------------------------------------------------------------
   Kills the mihrab clip on product photos. Promotes animal silhouettes.
   Founder portrait (.story__portrait .mihrab) and cert-card decor are
   intentionally left alone.
   ========================================================================= */

/* --- 1. Neutralise the mihrab on product cards & PDP gallery -------------- */
.product-card__frame {
  clip-path: none !important;
  -webkit-mask: none !important;
          mask: none !important;
  border-radius: 14px !important;
  aspect-ratio: 1 / 1 !important;
  background: var(--bone-soft) !important;
  border: 1px solid rgba(196, 162, 75, 0.35);
  box-shadow: 0 8px 22px -16px rgba(31, 33, 72, 0.45);
  overflow: hidden;
}
.product-card__frame::before { display: none !important; }
.product-card__frame .mihrab { display: none !important; }
.product-card__frame img {
  position: absolute;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 12px !important;
}

/* PDP main image frame: keep gold hairline more visible */
.pdp__gallery .product-card__frame {
  aspect-ratio: 1 / 1 !important;
  max-width: 560px;
  border-color: rgba(196, 162, 75, 0.55);
  box-shadow: 0 16px 40px -28px rgba(31, 33, 72, 0.65);
}

/* Featured / hero cards may opt into the octagonal Andalusi cut */
.product-card--featured .product-card__frame,
.product-card__frame.is-octagon {
  clip-path: polygon(
    30% 0%, 70% 0%,
    100% 30%, 100% 70%,
    70% 100%, 30% 100%,
    0% 70%, 0% 30%
  ) !important;
  border-radius: 0 !important;
}

/* --- 2. Animal silhouette chip (top-left badge on every card) ------------- */
.aa-animal-chip {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(244, 236, 216, 0.96);
  border: 1px solid rgba(196, 162, 75, 0.65);
  box-shadow: 0 2px 8px -4px rgba(31, 33, 72, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--olive, #6b7a39);
  z-index: 4;
  pointer-events: none;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1),
              box-shadow 240ms cubic-bezier(.22,.61,.36,1),
              border-color 240ms cubic-bezier(.22,.61,.36,1);
}
.aa-animal-chip svg {
  width: 30px;
  height: 30px;
  display: block;
  color: inherit;
}
.product-card:hover .aa-animal-chip,
.product-card__frame:hover .aa-animal-chip {
  transform: scale(1.08);
  border-color: rgba(196, 162, 75, 1);
  box-shadow: 0 4px 14px -4px rgba(196, 162, 75, 0.55),
              0 0 0 2px rgba(196, 162, 75, 0.18);
}

/* --- 3. PDP anatomy banner with breed caption ----------------------------- */
.aa-anatomy-breed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto var(--space-6, 32px);
  color: var(--olive, #6b7a39);
  max-width: 760px;
  padding: 0 var(--space-4, 16px);
}
.aa-anatomy-breed__svg {
  width: 200px;
  height: 200px;
  display: block;
}
.aa-anatomy-breed__svg svg {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--olive, #6b7a39);
}
.aa-anatomy-breed__caption {
  font-family: var(--font-accent, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--ink-soft, #4a4a4a);
  text-align: center;
  margin: 0;
  letter-spacing: 0.01em;
}

/* RTL: mirror animal silhouettes so they "face" inward on Arabic */
[dir="rtl"] .aa-animal-chip svg,
[dir="rtl"] .aa-anatomy-breed__svg svg {
  transform: scaleX(-1);
}

/* Reduced motion: kill the hover transform */
@media (prefers-reduced-motion: reduce) {
  .aa-animal-chip,
  .product-card:hover .aa-animal-chip,
  .product-card__frame:hover .aa-animal-chip {
    transition: none;
    transform: none;
  }
}

/* === AA-FRAME-V4 — NARRATIVE PIVOT (CEO 2026-05-16) === */

/* --- 1. Kill EVERY remaining mihrab clip on photos --------------------------
   site.css still defines `.story__portrait .mihrab` which positions the
   multifoil arch on top of the founder portrait. We override both the
   container and the svg here. We also defang any stray `.mihrab` that ends
   up wrapping/clipping an <img> elsewhere. The mihrab-frame.svg file stays
   on disk for non-photo decorative uses. */
.story__portrait .mihrab,
.story__portrait::before,
.story__portrait::after { display: none !important; }

.story__portrait {
  /* If the legacy markup is still served (cached/old) make it harmless */
  aspect-ratio: 4 / 5 !important;
  background: transparent !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.story__portrait img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
}

/* Any element with class .mihrab that sits over an <img> sibling — neutralise.
   The mihrab silhouette is still allowed inside .aa-decor / .aa-divider. */
.story img + .mihrab,
.story .mihrab + img,
figure .mihrab { display: none !important; }

/* --- 2. New story layout: heritage media + 4 literary sub-blocks ---------- */
#story .story {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.6fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 880px) {
  #story .story { grid-template-columns: 1fr; }
}

.story__media {
  position: sticky;
  top: 96px;
  align-self: start;
}
.story__heritage {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bone-soft, #f4ecd8);
  border: 1px solid rgba(196, 162, 75, 0.40);
  box-shadow: 0 14px 38px -22px rgba(31, 33, 72, 0.55);
}
.story__heritage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
}
.story__heritage figcaption {
  display: block;
  padding: 10px 14px 12px;
  font-family: var(--font-accent, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft, #4a4a4a);
  text-align: center;
  letter-spacing: 0.01em;
}

.story__body {
  max-width: 68ch;
}
.story__lede {
  margin: 8px 0 18px;
  letter-spacing: -0.005em;
}
.story__quote {
  margin: 0 0 28px;
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--gold-leaf, #c4a24b);
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.4;
  color: var(--terracotta-2, #8a3a1f);
}

.story__chapters {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
  margin-top: 8px;
}
.story__chapter {
  padding: 18px 22px 20px;
  background: rgba(244, 236, 216, 0.55);
  border: 1px solid rgba(196, 162, 75, 0.22);
  border-radius: 14px;
  position: relative;
}
.story__chapter + .story__chapter {
  /* visual breath between sub-blocks */
  margin-top: 0;
}
.story__chapter-h {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 8px;
  color: var(--ink, #1f2148);
}
.story__chapter-p {
  margin: 0;
  font-size: clamp(15.5px, 1.05vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft, #34344a);
}
.story__chapter-p strong {
  color: var(--ink, #1f2148);
  font-weight: 600;
}

/* The 4th chapter (the alquería) is intentionally quieter */
.story__chapter--d {
  background: transparent;
  border-color: rgba(196, 162, 75, 0.14);
  font-size: 0.97em;
}
.story__chapter--d .story__chapter-h {
  color: var(--ink-soft, #4a4a4a);
  font-style: italic;
  font-weight: 500;
}

/* RTL: caption alignment + chapter padding parity */
[dir="rtl"] .story__heritage figcaption { text-align: center; }
[dir="rtl"] .story__quote { border-inline-start: 3px solid var(--gold-leaf, #c4a24b); }

/* Reduced motion: drop sticky behaviour for users who request it */
@media (prefers-reduced-motion: reduce) {
  .story__media { position: static; }
}

/* === AA-FRAME-V4 END === */


/* === AA-HERO-BREATHE-V1 ===
   Hero copy was crashing into the 86px sticky nav (only ~25px gap to the H1).
   Push the hero content block down so the eyebrow + H1 sit comfortably below
   the nav. Hero background stays full-bleed; only .hero__inner gets padding.
   Responsive: tighter on mobile so we don't waste the small viewport. */
.hero .hero__inner {
  padding-top: clamp(120px, 18vh, 200px);
  padding-bottom: clamp(40px, 8vh, 96px);
}
@media (max-width: 720px) {
  .hero .hero__inner {
    padding-top: clamp(96px, 22vh, 140px);
  }
}


/* === AA-FIXES-V5 (2026-05-17) ===
   1. Mobile: hide the .story__heritage image entirely so it doesn't sit as
      a background behind the chapter text on narrow viewports.
   2. Center the timeline horizontally: rail at 50%, dots inline-blocked on
      the rail, year + caption centered below each dot. */

/* 1 — mobile hide heritage image */
@media (max-width: 760px) {
  .story__media,
  .story__heritage {
    display: none !important;
  }
  /* let .story__body span the full width on mobile */
  #story .story,
  .story__grid {
    grid-template-columns: 1fr !important;
  }
}

/* 2 — centered timeline */
.aa-timeline {
  padding-inline-start: 0 !important;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  position: relative;
}
.aa-timeline__rail {
  inset-inline-start: 50% !important;
  inset-inline-end: auto !important;
  transform: translateX(-50%) !important;
}
[dir="rtl"] .aa-timeline__rail {
  inset-inline-start: 50% !important;
  inset-inline-end: auto !important;
  transform: translateX(50%) !important;
}
.aa-timeline__milestone {
  padding-inline-start: 0 !important;
  padding-block: 1.4em;
  transform: none !important;
  text-align: center;
  position: relative;
}
[dir="rtl"] .aa-timeline__milestone { transform: none !important; }
.aa-timeline__dot {
  position: relative !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  display: block !important;
  margin: 0 auto 12px !important;
}
[dir="rtl"] .aa-timeline__dot {
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
}
.aa-timeline__segment {
  position: absolute !important;
  left: 50% !important;
  inset-inline-start: 50% !important;
  inset-inline-end: auto !important;
  top: 18px !important;
  width: 1px !important;
  transform: translateX(-50%) scaleY(0) !important;
  transform-origin: top !important;
}
.aa-timeline__milestone.is-active .aa-timeline__segment {
  transform: translateX(-50%) scaleY(1) !important;
}
[dir="rtl"] .aa-timeline__segment {
  left: auto !important;
  right: 50% !important;
  transform: translateX(50%) scaleY(0) !important;
}
[dir="rtl"] .aa-timeline__milestone.is-active .aa-timeline__segment {
  transform: translateX(50%) scaleY(1) !important;
}
.aa-timeline__year,
.aa-timeline__line {
  text-align: center;
  margin-inline: auto;
}