/* ==========================================================================
   A Vigorous Leader — Tier-B styles.
   Everything here is something Elementor's own controls cannot express. Each
   block says why. Colours are literals rather than CSS vars because the Kit
   already owns the palette; these are the shapes, not the tokens.

   Loaded by Design Deployer as the `ddp-custom` handle. Deactivating that
   plugin removes this file from the page.
   ========================================================================== */

/* --- Gold rule under section headings ------------------------------------
   Elementor's heading border control draws a full box, not a fixed-width rule
   under the text. Static width — no reveal animation (see gotcha 14). */
.avl-draw .elementor-heading-title { position: relative; padding-bottom: .38em; }
.avl-draw .elementor-heading-title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 84px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #E0A21E, #C9A45C);
}
.avl-draw-center .elementor-heading-title::after { left: 50%; transform: translateX(-50%); }

/* --- Hero background ------------------------------------------------------
   The container background control supports one gradient; the design layers a
   warm radial glow over a linear base. */
.avl-hero {
  background-image:
    radial-gradient(120% 90% at 78% 12%, rgba(224, 162, 30, .20), transparent 58%),
    linear-gradient(155deg, #241B10 0%, #332617 45%, #5A4429 100%);
}

/* --- Book cover: 3D tilt + stacked shadow --------------------------------
   Elementor's transform controls are effectively 2D here and cannot produce
   the double shadow that gives the cover its edge. */
.avl-book img {
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 30px 44px 70px rgba(0, 0, 0, .45);
  transform: perspective(1400px) rotateY(-11deg) rotateX(2deg);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.avl-book:hover img { transform: perspective(1400px) rotateY(-5deg) rotateX(1deg) translateY(-6px); }

/* --- Photos ---------------------------------------------------------------
   The client's photos arrived downsampled by Word (446–815px wide), so they are
   capped rather than stretched — upscaling would only make the softness bigger. */
.avl-framed img {
  border-radius: 14px;
  box-shadow: 0 24px 54px rgba(51, 38, 23, .18);
  width: 100%; max-width: 560px;
}
.avl-portrait img { max-width: 400px; aspect-ratio: 9 / 11; object-fit: cover; }
.avl-bandart img { max-width: 900px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }

/* --- Narrow centred column ------------------------------------------------ */
.avl-narrow { max-width: 780px; margin-inline: auto; }

/* --- Blockquotes ----------------------------------------------------------
   text-editor has no per-blockquote styling; one rule covers all three. */
.avl-pull blockquote {
  margin: 1.6em 0 0; padding: 0 0 0 1.15em;
  border-left: 4px solid #C9A45C;
  font-family: "Archivo", sans-serif; font-weight: 600;
  font-size: 1.16rem; line-height: 1.45; color: #332617;
}
.avl-pull-quote blockquote { font-size: 1.04rem; font-weight: 500; }
.avl-pull blockquote cite {
  display: block; margin-top: .8em;
  font-family: "Inter", sans-serif; font-style: normal; font-weight: 600;
  font-size: .88rem; letter-spacing: .04em; color: #8A6825;
}

/* --- Dark sections --------------------------------------------------------
   Text colour on dark surfaces is set natively per widget, not here. Elementor
   emits `.elementor-element-<id> .elementor-heading-title { color: … }` for
   every widget, and that beats any class selector we could ship — an earlier
   pass tried to fix dark-on-dark text from this file and silently lost. */
.avl-closingnote .elementor-widget-container { max-width: 860px; margin-inline: auto; }
.avl-closingnote em { color: #A9812F; font-style: normal; font-weight: 600; }

/* --- Ghost button ---------------------------------------------------------
   A transparent Elementor button still needs its border drawn. */
.avl-btn-ghost .elementor-button {
  border: 2px solid rgba(232, 211, 166, .5);
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.avl-btn-ghost .elementor-button:hover { border-color: #C9A45C; color: #E8D3A6; transform: translateY(-3px); }
.elementor-widget-button .elementor-button {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.elementor-widget-button:not(.avl-btn-ghost) .elementor-button:hover {
  transform: translateY(-3px); box-shadow: 0 14px 32px rgba(201, 164, 92, .38);
}

/* --- Header --------------------------------------------------------------- */
.avl-header { border-bottom: 1px solid rgba(232, 211, 166, .12); }
/* Small square mark before the wordmark — cheaper than an extra icon widget. */
.avl-brand .elementor-heading-title::before {
  content: ""; display: inline-block;
  width: 13px; height: 13px; margin-right: 10px;
  border: 3px solid #C9A45C; border-radius: 3px; vertical-align: -1px;
}

/* --- "What you'll take" as two columns of cards --------------------------
   icon-list can space and divide items but has no per-item card layout. */
.avl-checkwrap { max-width: 900px; margin-inline: auto; }
.avl-checklist .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 14px; }
.avl-checklist .elementor-icon-list-item {
  flex: 0 1 calc(50% - 7px); min-width: 260px;
  align-items: flex-start;
  background: rgba(232, 211, 166, .06);
  border: 1px solid rgba(232, 211, 166, .22);
  border-radius: 14px; padding: 18px 22px;
  transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.avl-checklist .elementor-icon-list-item:hover {
  border-color: rgba(201, 164, 92, .55); background: rgba(232, 211, 166, .1); transform: translateY(-3px);
}
.avl-perks .elementor-icon-list-item { align-items: flex-start; }

/* --- Free-chapter band ---------------------------------------------------- */
.avl-goldband { background-image: linear-gradient(135deg, #E8D3A6, #F6E7C6 55%, #E8D3A6); }

/* --- Signup form ---------------------------------------------------------- */
.avl-signup .elementor-field-textual { border: 1px solid rgba(232, 211, 166, .22); }
.avl-signup .elementor-field-textual::placeholder { color: rgba(251, 243, 235, .45); }

/* --- 13 initiative cards --------------------------------------------------
   flip-box's own width control is not responsive (only _element_width_tablet/
   _mobile exist, and those are the select, not the size), so per-breakpoint
   widths have to live here. Basis + gap sum to exactly 100% per row, and
   flex-grow stays 0 so card 13 does not stretch across the last row. */
.avl-flipgrid > .elementor-widget-flip-box { flex: 0 1 calc(33.333% - 12px); min-width: 250px; }
.avl-flipcard .elementor-flip-box { cursor: pointer; border-radius: 14px; overflow: hidden; }
.avl-flipcard .elementor-flip-box:focus-visible { outline: 3px solid #E0A21E; outline-offset: 3px; }
.avl-flipcard .avl-num {
  display: block; font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 2.2rem; line-height: 1; color: #A9812F; margin-bottom: .28em;
}
.avl-flipcard .avl-cardtitle {
  display: block; font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: 1.1rem; line-height: 1.3; color: #332617;
}
.avl-flipcard .elementor-flip-box__front { border: 1px solid rgba(42, 41, 40, .1); }

/* Click, not hover. Pro flips on :hover/:focus-within/:focus-visible and has no
   click control in any of its 536 keys, so those three states are neutralised
   and the flip is driven by .avl-flipped instead (set by custom.js).
   The selectors carry the widget's own effect+direction classes so they outrank
   Pro's rules on specificity — no !important needed.
   Click also fixes touch, where :hover latches until you tap elsewhere. */
.avl-flipcard.elementor-flip-box--effect-flip.elementor-flip-box--direction-left .elementor-flip-box:hover .elementor-flip-box__front,
.avl-flipcard.elementor-flip-box--effect-flip.elementor-flip-box--direction-left .elementor-flip-box:focus-within .elementor-flip-box__front,
.avl-flipcard.elementor-flip-box--effect-flip.elementor-flip-box--direction-left .elementor-flip-box:focus-visible .elementor-flip-box__front {
  transform: none;
}
.avl-flipcard.elementor-flip-box--effect-flip .elementor-flip-box:hover .elementor-flip-box__back,
.avl-flipcard.elementor-flip-box--effect-flip .elementor-flip-box:focus-within .elementor-flip-box__back,
.avl-flipcard.elementor-flip-box--effect-flip .elementor-flip-box:focus-visible .elementor-flip-box__back {
  transform: rotateX(0) rotateY(180deg);
}
.avl-flipcard.elementor-flip-box--effect-flip.elementor-flip-box--direction-left .elementor-flip-box.avl-flipped .elementor-flip-box__front {
  transform: rotateX(0) rotateY(-180deg);
}
.avl-flipcard.elementor-flip-box--effect-flip .elementor-flip-box.avl-flipped .elementor-flip-box__back {
  transform: none;
}

/* --- Responsive: Elementor's own breakpoints ------------------------------ */
@media (max-width: 1024px) {
  .avl-flipgrid > .elementor-widget-flip-box { flex: 0 1 calc(50% - 9px); }
  .avl-framed img, .avl-portrait img { max-width: 100%; }
}
@media (max-width: 767px) {
  /* 2-up, not 1-up: thirteen full-width cards is a 2,600px wall of scroll. */
  .avl-flipgrid { gap: 10px !important; }
  .avl-flipgrid > .elementor-widget-flip-box { flex: 0 1 calc(50% - 5px); min-width: 0; }
  .avl-flipcard .avl-num { font-size: 1.7rem; }
  .avl-flipcard .avl-cardtitle { font-size: .92rem; }
  .avl-checklist .elementor-icon-list-item { flex: 0 1 100%; min-width: 0; }
  .avl-book img { transform: none; }
  .avl-book:hover img { transform: translateY(-4px); }
  /* keep the header pair on one line — at 375px it otherwise pushes the page sideways */
  .avl-header-cta .elementor-button { padding: 10px 14px; font-size: .74rem; white-space: nowrap; }
  .avl-brand .elementor-heading-title { white-space: nowrap; }
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .avl-book img,
  .elementor-widget-button .elementor-button,
  .avl-checklist .elementor-icon-list-item { transition: none !important; }
  .avl-book:hover img,
  .elementor-widget-button .elementor-button:hover,
  .avl-checklist .elementor-icon-list-item:hover { transform: none !important; }
  /* cards still flip — the state change is the point — just without the turn */
  .avl-flipcard .elementor-flip-box__layer { transition: none !important; }
}