/* ============================================================
   Arletex · Banner Interlink (sistema global)
   ------------------------------------------------------------
   Patrón editorial reutilizable para destacar otra tela
   relacionada desde una landing. Sigue DESIGN.md v3.2.1:

   · Card horizontal radius 0, border ink, sombra sólida offset
     ink → orange en hover (§9.1 gesto editorial universal)
   · Anton uppercase + palabra Fraunces italic recta (§4.2)
   · Eyebrow pill, coordenada mono, flecha revelada §9.4
   · Tokens scopeados con prefijo `--axil-*` para no chocar
     con la paleta global `--ax-*` cuando se registre

   USO (esqueleto para un nuevo partial):
   ────────────────────────────────────────────────────────────
   @once
       @push('styles')
           <link rel="stylesheet" href="{{ asset('telas-assets/assets/css/banner-interlink.css') }}?v={{ filemtime(public_path('telas-assets/assets/css/banner-interlink.css')) }}">
       @endpush
   @endonce

   <section class="ax-interlink" aria-label="Tela relacionada: ...">
       <div class="ax-interlink__wrap">
           <a href="..." class="ax-interlink__card" aria-label="...">
               <div class="ax-interlink__media">
                   <picture>…</picture>
                   <span class="ax-interlink__coord" aria-hidden="true">REF · …</span>
               </div>
               <div class="ax-interlink__body">
                   <span class="ax-interlink__eyebrow">Tela relacionada</span>
                   <h2 class="ax-interlink__title">
                       Titular Anton uppercase
                       <em class="ax-interlink__accent">palabra-acento</em>
                   </h2>
                   <p class="ax-interlink__desc">Descripción Lato muted…</p>
                   <span class="ax-interlink__cta">
                       Conocer …
                       <svg class="ax-interlink__arrow" …>…</svg>
                   </span>
               </div>
           </a>
       </div>
   </section>
   ============================================================ */

/* ─── Tokens scopeados ─────────────────────────────────────── */
.ax-interlink {
    --axil-ink:         #1F2530;
    --axil-paper:       #FAF6EE;
    --axil-cream:       #F2EDE4;
    --axil-orange:      #F15A29;
    --axil-orange-deep: #B0401A;
    --axil-muted:       #6E6A60;
    --axil-rule:        rgba(14, 14, 14, 0.18);
    --axil-font-display:'Anton', 'Arial Narrow', sans-serif;
    --axil-font-accent: 'Fraunces', Georgia, serif;
    --axil-font-body:   'Lato', system-ui, sans-serif;
    --axil-font-mono:   'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

    padding: clamp(48px, 7vw, 96px) 0;
    background: transparent;
    font-family: var(--axil-font-body);
    color: var(--axil-ink);
}

.ax-interlink__wrap {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}

/* ─── Card (editorial horizontal, frame-chunky) ─────────────── */
.ax-interlink__card {
    display: grid;
    grid-template-columns: minmax(240px, 38%) 1fr;
    align-items: stretch;
    background: var(--axil-paper);
    border: 1px solid var(--axil-ink);
    border-radius: 0;
    box-shadow: clamp(8px, 1.4vw, 14px) clamp(8px, 1.4vw, 14px) 0 var(--axil-ink);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ax-interlink__card:hover,
.ax-interlink__card:focus-visible {
    transform: translate(-3px, -3px);
    box-shadow: clamp(11px, 1.6vw, 17px) clamp(11px, 1.6vw, 17px) 0 var(--axil-orange);
    text-decoration: none;
    color: inherit;
}

.ax-interlink__card:focus-visible {
    outline: 2px solid var(--axil-ink);
    outline-offset: 3px;
}

/* ─── Media ─────────────────────────────────────────────────── */
.ax-interlink__media {
    position: relative;
    background: var(--axil-cream);
    overflow: hidden;
    min-height: 280px;
}

.ax-interlink__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ax-interlink__card:hover .ax-interlink__img {
    transform: scale(1.04);
}

/* Coordenada mono — gesto editorial §9 */
.ax-interlink__coord {
    position: absolute;
    left: 12px;
    bottom: 10px;
    font-family: var(--axil-font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--axil-paper);
    background: rgba(31, 37, 48, 0.78);
    padding: 4px 8px;
    line-height: 1;
}

/* ─── Body ──────────────────────────────────────────────────── */
.ax-interlink__body {
    padding: clamp(24px, 3.5vw, 44px) clamp(24px, 3.5vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(12px, 1.4vw, 18px);
    min-width: 0;
}

/* Eyebrow pill — §4.2 */
.ax-interlink__eyebrow {
    align-self: flex-start;
    display: inline-block;
    font-family: var(--axil-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--axil-ink);
    background: transparent;
    border: 1px solid var(--axil-ink);
    border-radius: 9999px;
    padding: 6px 14px;
    line-height: 1;
}

/* Display-medium — Anton uppercase §4.2 */
.ax-interlink__title {
    margin: 0;
    font-family: var(--axil-font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 0.95;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--axil-ink);
}

/* Accent Fraunces italic recta (sin rotate) — §4.2 */
.ax-interlink__accent {
    font-family: var(--axil-font-accent);
    font-style: italic;
    font-weight: 400;
    color: var(--axil-orange);
    text-transform: none;
    letter-spacing: 0;
}

/* Body §4.2 */
.ax-interlink__desc {
    margin: 0;
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    line-height: 1.65;
    color: var(--axil-muted);
}

.ax-interlink__desc strong {
    color: var(--axil-ink);
    font-weight: 700;
}

/* CTA — link estilo §9.4 enlace con flecha revelada */
.ax-interlink__cta {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--axil-font-body);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--axil-ink);
    border-bottom: 2px solid var(--axil-ink);
    padding-bottom: 4px;
    align-self: flex-start;
    transition: color 120ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ax-interlink__card:hover .ax-interlink__cta {
    color: var(--axil-orange);
    border-bottom-color: var(--axil-orange);
}

.ax-interlink__arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ax-interlink__card:hover .ax-interlink__arrow {
    transform: translateX(4px);
}

/* ─── Modificadores opcionales ──────────────────────────────────
   Activan variantes sin tocar el partial base. Aplicar al `<a>`:
     <a class="ax-interlink__card ax-interlink__card--reverse">…
   ───────────────────────────────────────────────────────────── */

/* Media a la derecha (espejo) */
.ax-interlink__card--reverse {
    grid-template-columns: 1fr minmax(240px, 38%);
}
.ax-interlink__card--reverse .ax-interlink__media {
    order: 2;
}
.ax-interlink__card--reverse .ax-interlink__body {
    order: 1;
}

/* Compacto (paddings y media menores) */
.ax-interlink__card--compact .ax-interlink__media {
    min-height: 200px;
}
.ax-interlink__card--compact .ax-interlink__body {
    padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 32px);
    gap: clamp(8px, 1vw, 12px);
}
.ax-interlink__card--compact .ax-interlink__title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

/* Sin imagen (banner 100% tipográfico) */
.ax-interlink__card--no-media {
    grid-template-columns: 1fr;
}
.ax-interlink__card--no-media .ax-interlink__media {
    display: none;
}

/* Variante on-dark — ink bg, paper text */
.ax-interlink__card--on-dark {
    background: var(--axil-ink);
    color: var(--axil-paper);
    border-color: var(--axil-ink);
    box-shadow: clamp(8px, 1.4vw, 14px) clamp(8px, 1.4vw, 14px) 0 var(--axil-orange);
}
.ax-interlink__card--on-dark .ax-interlink__title,
.ax-interlink__card--on-dark .ax-interlink__desc strong {
    color: var(--axil-paper);
}
.ax-interlink__card--on-dark .ax-interlink__desc {
    color: rgba(250, 246, 238, 0.78);
}
.ax-interlink__card--on-dark .ax-interlink__eyebrow {
    color: var(--axil-paper);
    border-color: var(--axil-paper);
}
.ax-interlink__card--on-dark .ax-interlink__cta {
    color: var(--axil-paper);
    border-bottom-color: var(--axil-paper);
}
.ax-interlink__card--on-dark:hover .ax-interlink__cta {
    color: var(--axil-orange);
    border-bottom-color: var(--axil-orange);
}

/* ─── Tablet ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ax-interlink__card,
    .ax-interlink__card--reverse {
        grid-template-columns: 42% 1fr;
    }
    .ax-interlink__card--reverse {
        grid-template-columns: 1fr 42%;
    }
    .ax-interlink__media {
        min-height: 240px;
    }
}

/* ─── Móvil ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ax-interlink__card,
    .ax-interlink__card--reverse {
        grid-template-columns: 1fr;
        box-shadow: 8px 8px 0 var(--axil-ink);
    }
    .ax-interlink__card:hover,
    .ax-interlink__card:focus-visible {
        box-shadow: 10px 10px 0 var(--axil-orange);
    }
    .ax-interlink__card--reverse .ax-interlink__media {
        order: 0;
    }
    .ax-interlink__card--reverse .ax-interlink__body {
        order: 0;
    }
    .ax-interlink__media {
        min-height: 220px;
        aspect-ratio: 16 / 10;
    }
}

/* ─── Reduced motion §6.3, §14.4 ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ax-interlink__card,
    .ax-interlink__img,
    .ax-interlink__arrow,
    .ax-interlink__cta {
        transition: none;
    }
    .ax-interlink__card:hover,
    .ax-interlink__card:focus-visible {
        transform: none;
    }
    .ax-interlink__card:hover .ax-interlink__img {
        transform: none;
    }
    .ax-interlink__card:hover .ax-interlink__arrow {
        transform: none;
    }
}