/* ==========================================================================
   ATA – Experience Card
   Image + title + short description. No background, whole card is a link.
   Own namespace (.ata-exp-*). Values are CSS variables overridden per
   instance by the page-builder Style tab.
   ========================================================================== */

.ata-exp-card-widget { width:100%; }

.ata-exp-card {
    --ata-exp-ratio:4/3;
    --ata-exp-radius:14px;
    --ata-exp-title-color:#1a2e14;
    --ata-exp-title-size:1.25rem;
    --ata-exp-title-weight:700;
    --ata-exp-desc-color:#666;
    --ata-exp-desc-size:.92rem;
    --ata-exp-accent:#2d7a1e;

    display:flex; flex-direction:column;
    width:100%; box-sizing:border-box;
    background:none; border:0; padding:0;
    color:inherit; text-decoration:none;
}
.ata-exp-card *, .ata-exp-card *::before, .ata-exp-card *::after { box-sizing:border-box; }
a.ata-exp-card, a.ata-exp-card:hover, a.ata-exp-card:focus { color:inherit; text-decoration:none; }

/* ── Image ─────────────────────────────────────────────────────────────── */
.ata-exp-card .ata-exp-card__media {
    position:relative; display:block; overflow:hidden;
    aspect-ratio:var(--ata-exp-ratio);
    border-radius:var(--ata-exp-radius);
    background:#eef1ea;
    box-shadow:0 2px 6px rgba(20,35,15,.06);
    transition:box-shadow .45s ease, transform .45s ease;
    isolation:isolate;   /* keeps rounded corners during the zoom in Safari */
}
.ata-exp-card .ata-exp-card__img {
    display:block; width:100%; height:100%;
    object-fit:cover; margin:0; border-radius:0;
    transform:scale(1.001);
    transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.ata-exp-card .ata-exp-card__img--placeholder svg { display:block; width:100%; height:100%; }

/* soft shade at the bottom of the photo, fades in on hover */
.ata-exp-card .ata-exp-card__media::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top, rgba(10,20,8,.28), rgba(10,20,8,0) 55%);
    opacity:0; transition:opacity .5s ease;
}

/* ── Text ──────────────────────────────────────────────────────────────── */
.ata-exp-card .ata-exp-card__body { display:block; padding:18px 2px 0; }

.ata-exp-card .ata-exp-card__title {
    display:flex; align-items:center; gap:10px;
    margin:0 0 8px !important; padding:0;
    color:var(--ata-exp-title-color);
    font-size:var(--ata-exp-title-size);
    font-weight:var(--ata-exp-title-weight);
    line-height:1.3; letter-spacing:-.005em;
    transition:color .3s ease;
}
/* thin underline that draws in under the title on hover */
.ata-exp-card .ata-exp-card__title-text {
    background-image:linear-gradient(var(--ata-exp-accent), var(--ata-exp-accent));
    background-repeat:no-repeat; background-position:0 100%;
    background-size:0 2px;
    padding-bottom:3px;
    transition:background-size .45s cubic-bezier(.2,.7,.2,1);
}
.ata-exp-card .ata-exp-card__arrow {
    flex-shrink:0; width:1em; height:1em;
    color:var(--ata-exp-accent);
    opacity:0; transform:translateX(-8px);
    transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}

.ata-exp-card .ata-exp-card__desc {
    display:block; margin:0; padding:0;
    color:var(--ata-exp-desc-color);
    font-size:var(--ata-exp-desc-size);
    line-height:1.65;
}

/* ── Centered variant ──────────────────────────────────────────────────── */
.ata-exp-card--center .ata-exp-card__body { text-align:center; }
.ata-exp-card--center .ata-exp-card__title { justify-content:center; }

/* ── Hover / focus (links only) ────────────────────────────────────────── */
a.ata-exp-card:hover .ata-exp-card__media,
a.ata-exp-card:focus-visible .ata-exp-card__media {
    transform:translateY(-4px);
    box-shadow:0 18px 36px -14px rgba(20,35,15,.35);
}
a.ata-exp-card:hover .ata-exp-card__img,
a.ata-exp-card:focus-visible .ata-exp-card__img { transform:scale(1.06); }
a.ata-exp-card:hover .ata-exp-card__media::after,
a.ata-exp-card:focus-visible .ata-exp-card__media::after { opacity:1; }
a.ata-exp-card:hover .ata-exp-card__title,
a.ata-exp-card:focus-visible .ata-exp-card__title { color:var(--ata-exp-accent); }
a.ata-exp-card:hover .ata-exp-card__title-text,
a.ata-exp-card:focus-visible .ata-exp-card__title-text { background-size:100% 2px; }
a.ata-exp-card:hover .ata-exp-card__arrow,
a.ata-exp-card:focus-visible .ata-exp-card__arrow { opacity:1; transform:translateX(0); }

a.ata-exp-card:focus-visible { outline:none; }
a.ata-exp-card:focus-visible .ata-exp-card__media { outline:2px solid var(--ata-exp-accent); outline-offset:3px; }

/* Touch screens: show the arrow always, since there is no hover */
@media (hover:none) {
    a.ata-exp-card .ata-exp-card__arrow { opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce) {
    .ata-exp-card .ata-exp-card__media,
    .ata-exp-card .ata-exp-card__img,
    .ata-exp-card .ata-exp-card__arrow,
    .ata-exp-card .ata-exp-card__title-text { transition:none; }
    a.ata-exp-card:hover .ata-exp-card__media,
    a.ata-exp-card:hover .ata-exp-card__img { transform:none; }
}