/* =========================================================================
   Loanatik — photography treatments
   Four slot types shared across every pattern so 46 pages read as one site.
   Inherits the brand tokens from loanatik.css (navy/lime/radius/shadow).
   ========================================================================= */

:root{
  --media-radius:var(--radius-lg);
  --media-scrim-from:rgba(25,39,65,.90);
  --media-scrim-to:rgba(25,39,65,.58);
  /* used where copy runs the full height of the photo (funnel, thank-you) —
     the band must stay dark at the bottom too, since the compliance
     disclosure lives down there and has to stay legible */
  --media-scrim-mid:rgba(25,39,65,.76);
  --media-band-min:clamp(19rem,38vw,27rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --media-scrim-from:rgba(9,16,29,.92);
    --media-scrim-to:rgba(9,16,29,.68);
    --media-scrim-mid:rgba(9,16,29,.80);
  }
}
:root[data-theme="dark"]{
  --media-scrim-from:rgba(9,16,29,.92);
  --media-scrim-to:rgba(9,16,29,.68);
  --media-scrim-mid:rgba(9,16,29,.80);
}

/* Every photo in the system: never distorts, never shifts layout. */
.media-split__img,
.media-card__img,
.media-figure__img,
.media-band__img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* -------------------------------------------------------------------------
   1. SPLIT — photograph beside copy
   ------------------------------------------------------------------------- */
.media-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,4rem);align-items:center;
}
.media-split__media{
  position:relative;border-radius:var(--media-radius);overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--surface-2);
  aspect-ratio:4/3;
}
/* the lime dot motif, echoed from the hero mark */
.media-split__media::after{
  content:"";position:absolute;right:-2.2rem;bottom:-2.2rem;
  width:9rem;height:9rem;border-radius:50%;
  background:var(--lime);opacity:.14;pointer-events:none;
}
.media-split--flip .media-split__media{order:2}
.media-split--flip .media-split__body{order:1}
.media-split__body > * + *{margin-top:1.1rem}
.media-split__body h2{font-size:var(--fs-h2);font-weight:800}
.media-split__body p{color:var(--muted);font-size:1.1rem;max-width:52ch}
.media-split__body .eyebrow{margin-bottom:0}
.media-split__actions{display:flex;flex-wrap:wrap;gap:.8rem}

@media (max-width:860px){
  .media-split{grid-template-columns:1fr;gap:1.75rem}
  .media-split--flip .media-split__media,
  .media-split--flip .media-split__body{order:0}
  .media-split__media{aspect-ratio:16/10}
}

/* -------------------------------------------------------------------------
   2. BAND — full-bleed photographic strip with navy scrim
   ------------------------------------------------------------------------- */
.media-band{
  position:relative;isolation:isolate;
  min-height:var(--media-band-min);
  display:flex;align-items:center;
  padding-block:clamp(3.25rem,7vw,5.5rem);
  overflow:hidden;
}
.media-band__bg{position:absolute;inset:0;z-index:-2}
.media-band__bg .media-band__img{width:100%;height:100%}
.media-band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,var(--media-scrim-from) 0%,var(--media-scrim-from) 38%,var(--media-scrim-to) 100%);
}
.media-band__inner{position:relative;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);width:100%}
.media-band__copy{max-width:36rem;color:#fff}
.media-band__copy h2{color:#fff;font-size:var(--fs-h2);font-weight:800}
.media-band__copy p{color:#d7e1f0;margin-top:.95rem;font-size:1.1rem}
.media-band__copy .eyebrow{color:#bcd0ea}
/* lime rule — the brand accent that marks a band as ours */
.media-band__copy h2::after{
  content:"";display:block;width:3.25rem;height:4px;border-radius:2px;
  background:var(--lime);margin-top:1.1rem;
}
.media-band__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* a band can carry stat chips instead of prose */
.media-band__stats{display:flex;flex-wrap:wrap;gap:2.2rem;margin-top:1.75rem}
.media-band__stat b{display:block;font-size:1.9rem;font-weight:800;color:#fff;line-height:1.1}
.media-band__stat span{display:block;font-size:var(--fs-small);color:#c3d2e6;margin-top:.2rem}

@media (max-width:700px){
  .media-band::before{
    background:linear-gradient(180deg,var(--media-scrim-from) 0%,var(--media-scrim-from) 55%,var(--media-scrim-to) 100%);
  }
}

/* -------------------------------------------------------------------------
   3. CARD — photo-topped card for product / guide grids
   ------------------------------------------------------------------------- */
.media-cards{
  display:grid;gap:clamp(1.15rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
}
.media-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .25s ease,border-color .2s ease;
}
.media-card__media{aspect-ratio:3/2;overflow:hidden;background:var(--surface-2)}
.media-card__img{transition:transform .45s ease}
.media-card__body{padding:1.25rem 1.35rem 1.45rem;display:flex;flex-direction:column;flex:1}
.media-card__body h3{font-size:var(--fs-h3);font-weight:800}
.media-card__body p{color:var(--muted);font-size:var(--fs-small);margin-top:.5rem}
.media-card__link{margin-top:auto;padding-top:1rem;font-weight:700;color:var(--navy);
  display:inline-flex;align-items:center;gap:.4rem}
:root[data-theme="dark"] .media-card__link{color:var(--lime)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .media-card__link{color:var(--lime)}
}
a.media-card:hover,.media-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--lime) 45%,var(--line));
}
.media-card:hover .media-card__img{transform:scale(1.045)}

/* -------------------------------------------------------------------------
   4. FIGURE — inline supporting image inside long-form content
   ------------------------------------------------------------------------- */
.media-figure{margin-block:clamp(1.75rem,4vw,2.75rem)}
.media-figure__media{
  border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;
  box-shadow:var(--shadow-sm);background:var(--surface-2);
}
.media-figure figcaption{
  margin-top:.7rem;font-size:var(--fs-small);color:var(--muted);
  border-left:3px solid var(--lime);padding-left:.75rem;
}

/* -------------------------------------------------------------------------
   5. Photographic backing for the existing dark `.local` / `.cta` bands.
   The theme's navy gradient becomes the scrim instead of the background.
   ------------------------------------------------------------------------- */
/* `isolation` gives us a stacking context so the layer order below is
   self-contained; the scrim must sit ABOVE the photo (a ::before is
   generated before the bg element, so equal z-index would lose to it). */
.local--photo,.cta--photo{background:var(--navy-900);position:relative;isolation:isolate}
.local--photo > .media-band__bg,
.cta--photo > .media-band__bg{position:absolute;inset:0;z-index:0}
.local--photo > .media-band__bg .media-band__img,
.cta--photo > .media-band__bg .media-band__img{width:100%;height:100%}
.local--photo::before,.cta--photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    var(--media-scrim-from) 0%,
    var(--media-scrim-from) 46%,
    var(--media-scrim-to) 100%);
}
/* the theme's decorative skew highlight rides with the scrim */
.local--photo::after{z-index:1}
.local--photo .container,
.cta--photo .container{position:relative;z-index:2}
@media (max-width:700px){
  .local--photo::before,.cta--photo::before{
    background:linear-gradient(180deg,var(--media-scrim-from) 0%,var(--media-scrim-from) 58%,var(--media-scrim-to) 100%);
  }
}

/* -------------------------------------------------------------------------
   6. PAGE HERO — photographic masthead for interior pages.
   Replaces the flat --surface band with a scrimmed photograph; every text
   colour is restated because the hero flips from light to dark.
   ------------------------------------------------------------------------- */
.page-hero--photo{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--navy-900);border-bottom:0;
}
.page-hero--photo > .media-band__bg{position:absolute;inset:0;z-index:0}
.page-hero--photo > .media-band__bg .media-band__img{width:100%;height:100%}
.page-hero--photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    var(--media-scrim-from) 0%,
    var(--media-scrim-from) 44%,
    var(--media-scrim-to) 100%);
}
.page-hero--photo .container{position:relative;z-index:2}
.page-hero--photo h1{color:#fff}
.page-hero--photo .lead{color:#d7e1f0}
.page-hero--photo .eyebrow{color:#bcd0ea}
.page-hero--photo .crumbs{color:#b9c8dd}
.page-hero--photo .crumbs a{color:#dbe5f2}
.page-hero--photo .crumbs a:hover{color:#fff}
.page-hero--photo .crumbs .sep{color:#8fa4c0;opacity:1}
.page-hero--photo .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06)}
.page-hero--photo .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
/* keep the masthead from getting tall enough to push the H1 below the fold */
.page-hero--photo .container{padding-block:clamp(3rem,6.5vw,5rem)}

/* -------------------------------------------------------------------------
   7. FUNNEL / THANK-YOU backdrop.
   These pages are card-based, so the white shells float over the photograph
   and legibility of the form itself is untouched. Only the surrounding
   intro/legal copy flips to light.
   ------------------------------------------------------------------------- */
.funnel-wrap--photo,.ty-wrap--photo{
  position:relative;isolation:isolate;overflow:hidden;background:var(--navy-900);
}
.funnel-wrap--photo > .media-band__bg,
.ty-wrap--photo > .media-band__bg{position:absolute;inset:0;z-index:0}
.funnel-wrap--photo > .media-band__bg .media-band__img,
.ty-wrap--photo > .media-band__bg .media-band__img{width:100%;height:100%}
.funnel-wrap--photo::before,.ty-wrap--photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    var(--media-scrim-from) 0%,
    var(--media-scrim-mid) 50%,
    var(--media-scrim-from) 100%);
}
.funnel-wrap--photo > .container,
.ty-wrap--photo > .container{position:relative;z-index:2}
.funnel-wrap--photo .funnel-intro h1,
.ty-wrap--photo h1{color:#fff}
.funnel-wrap--photo .funnel-intro .lead,
.ty-wrap--photo > .container > .lead{color:#d7e1f0}
.funnel-wrap--photo .funnel-intro .eyebrow,
.ty-wrap--photo > .container > .eyebrow{color:#bcd0ea}
.funnel-wrap--photo .funnel-legal,
.ty-wrap--photo .funnel-legal{color:#b9c8dd}
.ty-wrap--photo .ty-badge{background:rgba(143,198,49,.22);color:#b7e26a}

/* -------------------------------------------------------------------------
   8. BLOG — featured images on single posts and the post list.
   ------------------------------------------------------------------------- */
.loanatik-post-hero{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.loanatik-post-hero img{
  width:100%;border-radius:var(--media-radius);
  box-shadow:var(--shadow-md);object-fit:cover;
}
.loanatik-post-list > li + li,
.loanatik-post-list > .wp-block-post + .wp-block-post{
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line);
}
.loanatik-post-list__img{margin-bottom:.9rem}
.loanatik-post-list__img img{
  width:100%;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);object-fit:cover;
  transition:transform .4s ease,box-shadow .25s ease;
}
.loanatik-post-list__img a:hover img{transform:scale(1.015);box-shadow:var(--shadow-md)}

/* -------------------------------------------------------------------------
   Motion / print
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .media-card,.media-card__img{transition:none}
  .media-card:hover{transform:none}
  .media-card:hover .media-card__img{transform:none}
}
@media print{
  .media-band::before{background:none}
  .media-band__copy,.media-band__copy h2,.media-band__copy p{color:#000}
}