/* ==========================================================================
   Fatima Zahra — Elementor widget styles.

   Every colour, size and spacing value comes from the design tokens defined
   once in the child theme's style.css :root block. The few values below that
   only this file needs are declared here in :root and referenced with var(),
   never hard-coded inline. Layout is flexbox throughout; nothing is absolutely
   positioned; decorative marks are real elements, not pseudo-elements.
   ========================================================================== */

:root {
  /* ---- Hero ---- */
  --fz-hero-display-size: clamp(2.5rem, 4.4vw, 5.25rem);
  --fz-hero-display-lh: 1.15;
  --fz-hero-eyebrow-size: clamp(1.375rem, 1.7vw, 2rem);
  --fz-hero-text-max: 31rem;
  --fz-hero-heading-max: 47rem;
  --fz-hero-gap: 1.25rem;
  --fz-hero-button-gap: 1rem;

  /* ---- Intro row ----
     Both figures track the 1920 canvas (80px padding, 580px tall cards) and
     scale down with the viewport rather than snapping at a breakpoint. */
  /* 48px on a 1920 screen, 36px at 1440, easing down to 17px on a phone —
     every step 40% under the original 80px canvas figure, so the cards keep
     the same proportions at every width, just less inset. */
  --fz-card-padding: clamp(1.05rem, 2.52vw, 3rem);
  --fz-col-min-height: clamp(20rem, 30vw, 36.25rem);
  --fz-card-gap: 1.25rem;
  --fz-col-basis: 33.333%;
  /* 35px from a 1346px-wide screen up, easing down below that. */
  --fz-col-heading-size: clamp(1.75rem, 2.6vw, 2.1875rem);
  /* Round article picture at the head of each intro card. Superseded by the
     widget's own Image Size control. */
  --fz-col-avatar: 150px;
  /* On top of the column's own 1.25rem gap, so the picture is not crowded by
     the category label under it. */
  --fz-col-avatar-gap: 0.5rem;
  --fz-dot-size: 0.5rem;
  --fz-dot-idle: #ecd9e3;

  /* ---- Glass card (values supplied with the design) ---- */
  --fz-glass-border: 1px solid var(--color-white, #fff);
  --fz-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.27) 0%, rgba(255, 255, 255, 0.90) 100%);
  --fz-glass-shadow: 0 40px 90px 0 rgba(142, 66, 103, 0.15);

  /* ---- Fallback overlap, superseded by the widget's own Layout control ---- */
  --fz-overlap: 14.5%;
  --fz-hero-pad: 56.25%;
  --fz-hero-pad-mobile: 125%;
}

/* ==========================================================================
   HERO + INTRO CARDS
   The cards ride up over the bottom of the hero by exactly the same
   percentage the hero reserves for them, so the two always cancel out at
   any width without a single absolute position.
   ========================================================================== */

.fz-top {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface, #fff);
}

/* ---- Hero ---- */

.fz-hero {
  display: flex;
  align-items: var(--fz-hero-align, center);
  padding-bottom: var(--fz-overlap);
  background-image: var(--fz-hero-image, none);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  background-color: var(--color-surface, #fff);
}

/* Zero-width spacer whose percentage top padding resolves against the hero's
   own width, giving the section the exact height of the chosen image while
   still letting it grow when the copy inside needs more room. */
.fz-hero__ratio {
  flex: 0 0 0px;
  width: 0;
  padding-top: max(0px, calc(var(--fz-hero-pad) - var(--fz-overlap)));
}

.fz-hero__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fz-hero-gap);
  min-width: 0;
  padding-block: 2.5rem;
}

.fz-hero__eyebrow {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: var(--fz-hero-eyebrow-size);
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-accent, #a84574);
  transition: opacity var(--duration-fast, 200ms) var(--ease-standard, ease);
}

a.fz-hero__eyebrow:hover { opacity: 0.75; }

.fz-hero__heading {
  max-width: var(--fz-hero-heading-max);
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fz-hero-display-size);
  line-height: var(--fz-hero-display-lh);
  letter-spacing: var(--text-display-ls, -0.02em);
  font-weight: var(--text-display-weight, 400);
  color: var(--color-heading, #3c1a33);
}

.fz-hero__text {
  max-width: var(--fz-hero-text-max);
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-body-size, 1.0625rem);
  line-height: var(--text-body-lh, 1.6);
  color: var(--color-body-muted, #5c545a);
}

/* The body text can carry the headline's link. It stays body copy rather than
   turning blue and underlined — the whole paragraph is the target, so the only
   thing that marks it is the colour lifting under the pointer. */
.fz-hero__text-link {
  color: inherit;
  transition: color var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-hero__text-link:hover,
.fz-hero__text-link:focus-visible { color: var(--color-accent, #a84574); }

.fz-hero__button { margin-top: var(--fz-hero-button-gap); }

/* ---- Intro row ---- */

.fz-intro {
  /* Relative only so the cards keep painting over the hero's background
     whatever stacking context Elementor puts around the widget. Nothing here
     is absolutely positioned. */
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--fz-overlap));
}

.fz-intro__inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--gap-card, 1.875rem);
}

/* A percentage basis rather than 0: with border-box sizing a zero basis leaves
   each column's own padding on top of its share, so columns carrying different
   padding come out different widths. Sharing the row by percentage keeps the
   three exactly equal whatever padding they carry. */
.fz-col {
  display: flex;
  flex: 1 1 var(--fz-col-basis);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--fz-card-gap);
  min-width: 0;
  min-height: var(--fz-col-min-height);
}

/* The round article picture, sitting on the same left edge as the words above
   it. A fixed square box with the image cropped to fill it, so a landscape
   featured image comes out as a circle rather than an oval. */
.fz-col__avatar {
  display: block;
  flex: 0 0 auto;
  align-self: flex-start;
  width: var(--fz-col-avatar);
  height: var(--fz-col-avatar);
  margin-bottom: var(--fz-col-avatar-gap);
  border-radius: var(--radius-circle, 9999px);
  overflow: hidden;
  background: var(--fz-dot-idle);
}

.fz-col__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base, 300ms) var(--ease-standard, ease);
}

a.fz-col__avatar:hover img { transform: scale(1.05); }

/* Three circles in a row have to start at the same height, or the row reads as
   a mistake — but the copy under them is still centred in what is left of the
   card, which is how the section was designed. Auto margins on the first and
   last of the remaining children do both at once: the picture stays pinned to
   the top and the free space below it is split evenly around the words. */
.fz-col--with-image { justify-content: flex-start; }
.fz-col--with-image .fz-col__avatar + * { margin-top: auto; }
.fz-col--with-image > :last-child { margin-bottom: auto; }

/* The glass card, exactly as specified with the design. */
.fz-card {
  border-radius: var(--radius-card, 2rem);
  border: var(--fz-glass-border);
  background: var(--fz-glass-bg);
  box-shadow: var(--fz-glass-shadow);
  padding: var(--fz-card-padding);
}

.fz-col__category {
  color: var(--color-accent, #a84574);
  transition: opacity var(--duration-fast, 200ms) var(--ease-standard, ease);
}

a.fz-col__category:hover { opacity: 0.75; }

.fz-col__heading {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fz-col-heading-size);
  line-height: var(--text-h2-lh, 1.2);
  letter-spacing: var(--text-h2-ls, -0.01em);
  font-weight: var(--text-h2-weight, 400);
  color: var(--color-heading, #3c1a33);
}

.fz-col__text {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-body-size, 1.0625rem);
  line-height: var(--text-body-lh, 1.6);
  color: var(--color-body-muted, #5c545a);
}

/* A linked heading keeps the colour it already had and only shifts on hover,
   so making it clickable never changes how the page looks at rest. */
.heading-link {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.heading-link:hover { opacity: 0.8; }

/* ---- Slider dots ----
   Shared: the article page's related-articles carousel styles its buttons with
   `.fz-dots__dot` too, so this pair stays here even though the intro row no
   longer carries a slider of its own. */

.fz-dots {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 2rem;
}

.fz-dots__dot {
  width: var(--fz-dot-size);
  height: var(--fz-dot-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle, 9999px);
  background: var(--fz-dot-idle);
  transition: background-color var(--duration-fast, 200ms) var(--ease-standard, ease),
              transform var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-dots__dot.is-active {
  background: var(--color-accent, #a84574);
  transform: scale(1.15);
}

/* Editor-only placeholder, never seen on the live page. */
.fz-empty {
  padding: 2.5rem;
  text-align: center;
  font-family: var(--font-body, sans-serif);
  color: var(--color-body-muted, #5c545a);
}

/* ==========================================================================
   RESPONSIVE
   Breakpoints match Elementor's own, so the widget's responsive controls and
   this file always step down together.
   ========================================================================== */

/* Stacking at Elementor's own tablet breakpoint, not one of our own: the
   overlap control steps down to its tablet value here too, so the columns and
   the amount they ride over the hero always change together. */
@media (max-width: 1024px) {
  :root { --fz-col-basis: 100%; }
  .fz-intro__inner { flex-wrap: wrap; }
  .fz-col { min-height: 0; }
  .fz-hero__inner { padding-block: 2rem; }
}

@media (max-width: 767px) {
  .fz-hero {
    background-image: var(--fz-hero-image-mobile, var(--fz-hero-image, none));
  }
  .fz-hero__ratio {
    padding-top: max(0px, calc(var(--fz-hero-pad-mobile) - var(--fz-overlap)));
  }
  /* The picture fills the frame on a phone, so the copy drops to the foot of
     it — over the plainest part of the image — and takes a wash of the page
     colour behind it so the type stays readable whatever the crop lands on. */
  .fz-hero__inner {
    padding-block: 3rem 2.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.72) 26%, rgba(255, 255, 255, 0.92) 100%);
  }

  .fz-dots { margin-top: 1.5rem; }
}