/* ===========================
   Project Card – Common
=========================== */
.project-card__title { font-size: 24px; margin: 0; line-height: 1.15; transition: color .35s ease .06s; }
.project-card__cta { white-space: nowrap; color: var(--ast-global-color-3); font-size: 18px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; transition: color .35s ease .06s, opacity .35s ease, transform .35s cubic-bezier(.25, 1, .5, 1); }
.project-card__cta .arrow { display: inline-flex; vertical-align: middle; transform: translateX(0); opacity: .9; transition: transform .4s cubic-bezier(.22, 1.61, .36, 1), opacity .35s ease; }
.project-card--a .project-card__title { overflow-wrap: anywhere; }

/* ===========================
   Project Card – Layout A (Panel-Based)
=========================== */
.project-card--a { max-width: 608px; position: relative; }
.project-card--a .project-card__panel { position: relative; }
.project-card--a .project-card__panel-bg { position: absolute; left: -28px; bottom: -4px; width: 506px; height: 313px; background-color: #F3F3F3; z-index: 0; transition: background-color .35s ease; }
.project-card--a .project-card__media { position: relative; z-index: 1; max-width: 566px; margin-left: auto; }
.project-card--a .project-card__img { max-width: 536px; width: 100%; height: auto; aspect-ratio: 536/311; object-fit: cover; display: block; }
.project-card--a .project-card__slab { position: relative; z-index: 1; }
.project-card--a .project-card__slab__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; width: 100%; max-width: 452px; padding: 23px 20px 20px 44px; background-color: #F3F3F3; transition: background-color .35s ease; }

/* Hover */
.project-card--a a.project-card__link:hover .project-card__panel-bg { background-color: var(--ast-global-color-1); }
.project-card--a a.project-card__link:hover .project-card__slab__inner { background-color: var(--ast-global-color-1); }
.project-card--a a.project-card__link:hover .project-card__title,
.project-card--a a.project-card__link:hover .project-card__cta { color: #fff; }
.project-card--a a.project-card__link:hover .project-card__cta { transform: translateX(6px); opacity: 1; }
.project-card--a a.project-card__link:hover .project-card__cta .arrow { transform: translateX(10px); opacity: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .project-card--a .project-card__slab__inner,
  .project-card--a .project-card__panel-bg,
  .project-card__cta,
  .project-card__cta .arrow { transition: none; }
}

/* ===========================
   Project Card – Layout B (Image Left, Panel Extends Right)
=========================== */
.project-card--b { position: relative; max-width: 1200px; }
.project-card--b .project-card__panel { position: relative; }
.project-card--b .project-card__panel-bg { position: absolute; right: 0; bottom: -8px; width: 574px; height: 398px; background-color: #F3F3F3; z-index: 0; transition: background-color .35s ease; }
.project-card--b .project-card__media { position: relative; z-index: 1; width: 606px; height: 396px; margin-left: 95px; overflow: hidden; }
.project-card--b .project-card__img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 603/395; }

.project-card--b .project-card__slab { position: relative; z-index: 1; }
.project-card--b .project-card__slab__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 25px 99px 24px 29px; max-width: 554px; margin-right: 0; margin-left: auto; background-color: #F3F3F3; transition: background-color .35s ease; }

/* Hover (match A; no media motion) */
.project-card--b a.project-card__link:hover .project-card__panel-bg { background-color: var(--ast-global-color-1); }
.project-card--b a.project-card__link:hover .project-card__slab__inner { background-color: var(--ast-global-color-1); }
.project-card--b a.project-card__link:hover .project-card__title,
.project-card--b a.project-card__link:hover .project-card__cta { color: #fff; }
.project-card--b a.project-card__link:hover .project-card__cta { transform: translateX(6px); opacity: 1; }
.project-card--b a.project-card__link:hover .project-card__cta .arrow { transform: translateX(10px); opacity: 1; }

/* responsive */
@media (max-width: 1200px) {
  .project-card--b .project-card__media { width: 600px; height: 375px; margin-left: 48px; }
  .project-card--b .project-card__panel-bg { width: 720px; }
  .project-card--b .project-card__slab__inner { max-width: 720px; }
}
@media (max-width: 1024px) {
  .project-card--b .project-card__media { width: 560px; height: 350px; margin-left: 36px; }
  .project-card--b .project-card__panel-bg { width: 680px; height: 210px; }
  .project-card--b .project-card__slab__inner { max-width: 680px; }
}
@media (max-width: 900px) {
  .project-card--b .project-card__panel-bg { position: relative; right: auto; bottom: auto; width: 100%; height: auto; margin-top: 16px; }
  .project-card--b .project-card__media { width: 100%; height: auto; margin-left: 0; }
  .project-card--b .project-card__img { width: 100%; height: auto; aspect-ratio: 16/9; }
  .project-card--b .project-card__slab__inner { max-width: 100%; padding: 14px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-card--b .project-card__panel-bg,
  .project-card--b .project-card__slab__inner,
  .project-card__cta,
  .project-card__cta .arrow { transition: none; }
}

/* ===========================
   Project Card – Layout C (Centered Slab Over Image Bottom)
=========================== */
.project-card--c{position:relative;max-width:920px;margin:0 auto}
.project-card--c .project-card__panel{position:relative}

.project-card--c .project-card__media{position:relative;z-index:0;overflow:hidden}
.project-card--c .project-card__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 404 / 580;
}
/* optional dark overlay toggle already supported via `has-overlay` */
.project-card--c .project-card__media.has-overlay::after{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.25)
}

/* centered white slab overlapping image */
.project-card--c .project-card__slab{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  z-index:2;width:calc(100% - 22px); /* inset from edges */
  max-width:720px;
}

.project-card--c .project-card__slab__inner {
    background: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    padding: 22px 36px 12px 22px;
    display: grid;
    row-gap: 7px;
    justify-items: start;
}
/* title on top, CTA below (no wrap issues) */
.project-card--c .project-card__title{line-height:1.15}
.project-card--c .project-card__cta{padding-right:6px}

/* hover colors to match A/B (invert slab) */
.project-card--c a.project-card__link:hover .project-card__slab__inner{background:var(--ast-global-color-1)}
.project-card--c a.project-card__link:hover .project-card__title,
.project-card--c a.project-card__link:hover .project-card__cta{color:#fff}
.project-card--c a.project-card__link:hover .project-card__cta{transform:translateX(6px);opacity:1}
.project-card--c a.project-card__link:hover .project-card__cta .arrow{transform:translateX(10px);opacity:1}

/* responsive: move slab below image so it never covers too much on small screens */
@media (max-width:900px){
  .project-card--c{max-width:100%}
  .project-card--c .project-card__slab{
    position:relative;left:auto;bottom:auto;transform:none;
    width:100%;max-width:none;margin-top:14px;padding:0 16px;
  }
  .project-card--c .project-card__slab__inner{
    padding:18px 20px;box-shadow:none;border:1px solid rgba(0,0,0,.06)
  }
  .project-card--c .project-card__title{font-size:clamp(20px,2.6vw,24px)}
  .project-card--c .project-card__cta{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .project-card--c .project-card__slab__inner,
  .project-card__cta,
  .project-card__cta .arrow{transition:none}
}

/* ===========================
   Project Card – Layout D (Right-Aligned Slab Over Image Bottom)
=========================== */
.project-card--d{position:relative;max-width:1024px;margin:0 auto}
.project-card--d .project-card__panel{position:relative}

/* image spans wide; crop with object-fit */
.project-card--d .project-card__media{position:relative;z-index:0;overflow:hidden}
.project-card--d .project-card__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 903 / 294;
}

/* optional dark overlay if toggled */
.project-card--d .project-card__media.has-overlay::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25)}

/* right-aligned white slab overlapping the image */
.project-card--d .project-card__slab {
    position: absolute;
    right: 8px;
    bottom: 10px;
    z-index: 2;
    min-width: 384px;
    max-width: calc(100% - 112px);
}

.project-card--d .project-card__slab__inner {
    background: #fff;
    padding: 22px 36px 15px 24px;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    display: grid;
    row-gap: 7px;
    justify-items: start;
    transition: background-color .35s ease;
}

/* hover (match A/B/C – invert slab color + CTA motion) */
.project-card--d a.project-card__link:hover .project-card__slab__inner{background:var(--ast-global-color-1)}
.project-card--d a.project-card__link:hover .project-card__title,
.project-card--d a.project-card__link:hover .project-card__cta{color:#fff}
.project-card--d a.project-card__link:hover .project-card__cta{transform:translateX(6px);opacity:1}
.project-card--d a.project-card__link:hover .project-card__cta .arrow{transform:translateX(10px);opacity:1}

/* responsive: drop slab below image for small screens */
@media (max-width:1024px){
  .project-card--d .project-card__slab{right:32px;bottom:28px;width:640px;max-width:calc(100% - 64px)}
}
@media (max-width:900px){
  .project-card--d{max-width:100%}
  .project-card--d .project-card__slab{
    position:relative;right:auto;bottom:auto;width:100%;max-width:none;
    margin-top:14px;padding:0 16px;transform:none
  }
  .project-card--d .project-card__slab__inner{
    padding:18px 20px;border:1px solid rgba(0,0,0,.06);box-shadow:none
  }
}
@media (prefers-reduced-motion:reduce){
  .project-card--d .project-card__slab__inner,
  .project-card__cta,
  .project-card__cta .arrow{transition:none}
}

/* ===========================
   Project Card – Layout E (Thumbnail Left, Compact Slab)
=========================== */
.project-card--e{position:relative;max-width:480px;margin:0 auto}
.project-card--e .project-card__panel{position:relative}

/* slab container */
.project-card--e .project-card__slab{position:relative}
.project-card--e .project-card__slab__inner{
  background:#fff;
  padding:10px 12px;
  display:grid;
  grid-template-columns: 90px minmax(0,1fr);
  column-gap:22px;
  align-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.10);
  transition:background-color .35s ease;
}

/* thumbnail */
.project-card--e .project-card__thumb{
  width:90px;height:90px;
  margin:0;overflow:hidden;border-radius:0;flex:0 0 auto
}
.project-card--e .project-card__thumb .project-card__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    max-width: none;
    aspect-ratio: 1 / 1;
}
/* content */
.project-card--e .project-card__content{display:grid;row-gap:6px;align-content:center}
.project-card--e .project-card__title{line-height:1.15}
.project-card--e .project-card__cta{padding-right:6px}

/* hover (match A/B/C/D) */
.project-card--e a.project-card__link:hover .project-card__slab__inner{background:var(--ast-global-color-1)}
.project-card--e a.project-card__link:hover .project-card__title,
.project-card--e a.project-card__link:hover .project-card__cta{color:#fff}
.project-card--e a.project-card__link:hover .project-card__cta{transform:translateX(6px);opacity:1}
.project-card--e a.project-card__link:hover .project-card__cta .arrow{transform:translateX(10px);opacity:1}

/* responsive */
@media (max-width:720px){
  .project-card--e{max-width:100%}
  .project-card--e .project-card__slab__inner{
    grid-template-columns: 1fr;
    row-gap:14px;
  }
  .project-card--e .project-card__thumb{
    width:100%;height:auto;border-radius:0
  }
  .project-card--e .project-card__thumb .project-card__img{
    width:100%;height:auto;aspect-ratio:16/9;object-fit:cover
  }
  .project-card--e .project-card__cta{font-size:16px}
  .project-card--e .project-card__title{font-size:clamp(20px,2.6vw,24px)}
}

@media (prefers-reduced-motion:reduce){
  .project-card--e .project-card__slab__inner,
  .project-card__cta,
  .project-card__cta .arrow{transition:none}
}