/*
 * Alternate visual styles for the SSR detail page. Three variants —
 * Vitrina / Vitral / Expediente — all scoped to body-class hooks so
 * the base catalog.css stays untouched. Switcher widget at the top
 * lets you jump between them via ?style=A|B|C URL param.
 *
 * Loquet theme typography in scope:
 *   --font-display  poynter-oldstyle-display (Adobe Typekit "dpf2qad")
 *   --font-script   orpheuspro
 *   --font-sans     futura-pt
 *   body            Lora (Google) — already loaded by Loquet
 *
 * Color anchor:   #c2202c (CDIJUM red)
 * Paper tones:    cream #F8F4EC, magazine #FAF6EE, kraft #EEE5D4
 * Ink:            #1c1818 (warm near-black; never pure #000)
 */

:root {
    --cc-font-display: "poynter-oldstyle-display", "Lora", Georgia, serif;
    --cc-font-script:  "orpheuspro", "Lora", Georgia, serif;
    --cc-font-sans:    "futura-pt", "Futura", "Avenir Next", system-ui, sans-serif;
    --cc-ink: #1c1818;
    --cc-ink-soft: #4a4441;
    --cc-rule: #cdb993;
    --cc-rule-soft: #e8dec9;
}

/* ─── Style switcher (visible on all 3 variants + legacy) ───────────────── */
/* Pinned to bottom-right so the WP admin bar (and any sticky header
   from the theme) can't overlap. */
.cdijum-catalog__style-switcher {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.55rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #d8d2c4;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    font-family: var(--cc-font-sans);
    font-size: 0.72rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cdijum-catalog__style-switcher-label {
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-right: 0.4rem;
    padding-left: 0.2rem;
}
.cdijum-catalog__style-switcher-btn {
    color: #555;
    text-decoration: none;
    padding: 0.32em 0.7em;
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.cdijum-catalog__style-switcher-btn:hover,
.cdijum-catalog__style-switcher-btn:focus {
    background: #f4eee1;
    color: var(--cc-ink);
    text-decoration: none;
    outline: none;
}
.cdijum-catalog__style-switcher-btn.is-active {
    background: #c2202c;
    color: #fff;
}
@media print { .cdijum-catalog__style-switcher { display: none !important; } }


/* ═══════════════════════════════════════════════════════════════════════
   Option A — VITRINA  (museum object label)
   ═══════════════════════════════════════════════════════════════════════ */

body.cdijum-detail--vitrina,
.cdijum-detail--vitrina {
    background: #F8F4EC;
}

.cdijum-detail--vitrina .cdijum-catalog__detail-card {
    background: #fff;
    border: 1px solid var(--cc-rule-soft);
    border-radius: 0;
    padding: 3.5rem clamp(2rem, 5vw, 4rem) 3rem;
    box-shadow: 0 1px 0 var(--cc-rule-soft);
    position: relative;
}

/* Top rule + bottom rule decorative frame */
.cdijum-detail--vitrina .cdijum-catalog__detail-card::before,
.cdijum-detail--vitrina .cdijum-catalog__detail-card::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 2px;
    background: #c2202c;
}
.cdijum-detail--vitrina .cdijum-catalog__detail-card::before { top: 18px; }
.cdijum-detail--vitrina .cdijum-catalog__detail-card::after  { bottom: 18px; }

.cdijum-detail--vitrina .cdijum-catalog__modal-eyebrow {
    text-align: center;
    color: #c2202c;
    font-family: var(--cc-font-sans);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin: 0.5rem 0 1.5rem;
    position: relative;
}
/* Side rules flanking the eyebrow */
.cdijum-detail--vitrina .cdijum-catalog__modal-eyebrow::before,
.cdijum-detail--vitrina .cdijum-catalog__modal-eyebrow::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 36px;
    height: 1px;
    background: var(--cc-rule);
    margin: 0 1rem;
}

.cdijum-detail--vitrina .cdijum-catalog__modal-title {
    font-family: var(--cc-font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.05;
    text-align: center;
    color: var(--cc-ink);
    margin: 0 0 1rem;
    /* Better treatment for the bilingual title — let it breathe */
    letter-spacing: -0.005em;
}
.cdijum-detail--vitrina .cdijum-catalog__modal-subtitle {
    font-family: var(--cc-font-script);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--cc-ink-soft);
    text-align: center;
    margin: 0 auto 2rem;
    max-width: 42rem;
}

/* Decorative ornament between title and metadata */
.cdijum-detail--vitrina .cdijum-catalog__modal-headline::after {
    content: "❦";
    display: block;
    text-align: center;
    color: #c2202c;
    font-size: 1.6rem;
    margin: 2.2rem 0 0;
}

/* Metadata grid: 2 columns. The vertical divider is a border-left on
   the dd cell (instead of a real 1px column, which would receive grid
   cells via auto-flow with display:contents rows and break every other
   row's layout — bug seen in v1).
   Margin: 1rem column-gap controls the offset of the rule from the dt;
   padding-left on dd controls the offset from rule to value. */
.cdijum-detail--vitrina .cdijum-catalog__modal-grid {
    margin: 2.5rem auto 0;
    grid-template-columns: minmax(160px, 32%) 1fr;
    column-gap: 0;            /* divider hugs the right edge of the gap */
    row-gap: 0.6rem;
    max-width: 56rem;
}
.cdijum-detail--vitrina .cdijum-catalog__modal-row {
    display: contents;
}
.cdijum-detail--vitrina .cdijum-catalog__modal-row dt {
    font-family: var(--cc-font-sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cc-ink-soft);
    font-weight: 500;
    padding: 0.4rem 1.2rem 0 0;
    text-align: right;
}
.cdijum-detail--vitrina .cdijum-catalog__modal-row dd {
    font-family: "Lora", Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--cc-ink);
    padding: 0.35rem 0 0.35rem 1.2rem;
    border-left: 1px solid var(--cc-rule);
    min-width: 0;             /* allow text to wrap normally, not character-by-character */
}

/* "Explorar más" gets section-header treatment */
.cdijum-detail--vitrina .cdijum-catalog__related h3 {
    text-align: center;
    font-family: var(--cc-font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cc-ink-soft);
    border-top: 1px solid var(--cc-rule);
    padding-top: 2rem;
    margin-top: 2.5rem;
}
.cdijum-detail--vitrina .cdijum-catalog__related-list {
    max-width: 36rem;
    margin: 0 auto;
}

/* Portrait full-width: in vitrina mode, frame it like a museum object */
.cdijum-detail--vitrina .cdijum-catalog__portrait-figure {
    margin-bottom: 2rem;
}
.cdijum-detail--vitrina .cdijum-catalog__portrait-figure a {
    border-radius: 0;
    padding: 14px;
    background: #fff;
    box-shadow:
        0 0 0 1px var(--cc-rule),
        0 14px 36px rgba(0, 0, 0, 0.12);
}


/* ═══════════════════════════════════════════════════════════════════════
   Option B — VITRAL  (editorial magazine)
   ═══════════════════════════════════════════════════════════════════════ */

body.cdijum-detail--vitral,
.cdijum-detail--vitral {
    background: #FAF6EE;
}

.cdijum-detail--vitral .cdijum-catalog__detail-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 2rem 0 3rem;
    max-width: 56rem;
    margin: 0 auto;
}

.cdijum-detail--vitral .cdijum-catalog__modal-eyebrow {
    display: block;
    text-align: center;
    color: var(--cc-ink-soft);
    font-family: var(--cc-font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 1.8rem;
    position: relative;
}
/* Ornament rules above and below the eyebrow, centered ✦ between them */
.cdijum-detail--vitral .cdijum-catalog__modal-headline {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
}
.cdijum-detail--vitral .cdijum-catalog__modal-headline::before {
    content: "✦";
    display: block;
    text-align: center;
    color: #c2202c;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.cdijum-detail--vitral .cdijum-catalog__modal-title {
    font-family: var(--cc-font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    line-height: 1;
    color: var(--cc-ink);
    margin: 0 0 1rem;
    text-align: center;
    /* Drop cap on the first letter — Poynter Display, in red */
    /* (Implemented per-element via ::first-letter for the title.) */
}
.cdijum-detail--vitral .cdijum-catalog__modal-title::first-letter {
    font-family: var(--cc-font-display);
    color: #c2202c;
    font-size: 1.55em;
    font-weight: 400;
    line-height: 1;
    padding-right: 0.04em;
}
.cdijum-detail--vitral .cdijum-catalog__modal-subtitle {
    font-family: var(--cc-font-script);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--cc-ink-soft);
    text-align: center;
    max-width: 36rem;
    margin: 0.6rem auto 0;
}
/* Bottom rule under the headline */
.cdijum-detail--vitral .cdijum-catalog__modal-headline::after {
    content: "";
    display: block;
    width: 80px;
    height: 1px;
    background: var(--cc-rule);
    margin: 2rem auto 0;
}

/* Two-column metadata: like a magazine's facing-page object label */
.cdijum-detail--vitral .cdijum-catalog__modal-grid {
    columns: 2 18rem;
    column-gap: 3rem;
    column-rule: 1px solid var(--cc-rule-soft);
    grid-template-columns: none;  /* override base */
    display: block;
    margin-top: 1rem;
}
.cdijum-detail--vitral .cdijum-catalog__modal-row {
    display: block;
    break-inside: avoid;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--cc-rule-soft);
}
.cdijum-detail--vitral .cdijum-catalog__modal-row:last-child {
    border-bottom: 0;
}
.cdijum-detail--vitral .cdijum-catalog__modal-row dt {
    display: block;
    font-family: var(--cc-font-sans);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cc-ink-soft);
    font-weight: 500;
    margin-bottom: 0.2rem;
}
.cdijum-detail--vitral .cdijum-catalog__modal-row dd {
    display: block;
    font-family: "Lora", Georgia, serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cc-ink);
}

.cdijum-detail--vitral .cdijum-catalog__related {
    text-align: center;
    border-top: 1px solid var(--cc-rule);
    margin-top: 2.5rem;
    padding-top: 2rem;
}
.cdijum-detail--vitral .cdijum-catalog__related h3 {
    font-family: var(--cc-font-script);
    font-style: italic;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--cc-ink);
    margin-bottom: 1.2rem;
}

/* Portrait: in vitral mode, treat it as a centerpiece */
.cdijum-detail--vitral .cdijum-catalog__portrait-figure {
    margin: 0 auto 2.5rem;
    max-width: 60%;
}


/* ═══════════════════════════════════════════════════════════════════════
   Option C — EXPEDIENTE  (archive folder)
   ═══════════════════════════════════════════════════════════════════════ */

body.cdijum-detail--expediente,
.cdijum-detail--expediente {
    background:
        /* subtle paper grain via SVG noise */
        repeating-linear-gradient(
            0deg,
            rgba(70, 50, 20, 0.012) 0,
            rgba(70, 50, 20, 0.012) 1px,
            transparent 1px,
            transparent 3px
        ),
        #EEE5D4;
}

.cdijum-detail--expediente .cdijum-catalog__detail-card {
    background: #FBF7EE;
    border: 1px solid #d8caac;
    border-radius: 4px;
    padding: 2.5rem 2.25rem 2rem;
    box-shadow:
        0 1px 0 #d8caac,
        0 16px 32px -16px rgba(80, 50, 10, 0.18);
    position: relative;
    margin-top: 2.5rem;
}

/* Folder tab at the top */
.cdijum-detail--expediente .cdijum-catalog__detail-card::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 1.5rem;
    width: 220px;
    height: 28px;
    background: #FBF7EE;
    border: 1px solid #d8caac;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.03);
}

.cdijum-detail--expediente .cdijum-catalog__modal-eyebrow {
    position: absolute;
    top: -16px;
    left: 2.4rem;
    font-family: var(--cc-font-sans);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6a4d20;
    margin: 0;
    z-index: 1;
    background: transparent;
}

.cdijum-detail--expediente .cdijum-catalog__modal-title {
    font-family: var(--cc-font-display);
    font-weight: 500;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1.15;
    color: var(--cc-ink);
    margin: 1rem 0 0.5rem;
    /* Stamp-like spacing */
    letter-spacing: 0.005em;
    text-shadow: 0 0 1px rgba(80, 50, 10, 0.05);
}
.cdijum-detail--expediente .cdijum-catalog__modal-subtitle {
    font-family: var(--cc-font-script);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--cc-ink-soft);
    margin-bottom: 1.5rem;
}

/* Replace the single big metadata grid with cards. We can't truly
   regroup fields with CSS alone, so we use grid-row spans + visual
   cardification: every label-value pair becomes its own index card. */
.cdijum-detail--expediente .cdijum-catalog__modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.cdijum-detail--expediente .cdijum-catalog__modal-row {
    display: block;
    background: #fff;
    border: 1px solid #e8dec9;
    border-radius: 3px;
    padding: 0.85rem 1rem;
    position: relative;
    overflow: hidden;
}
/* Red corner-tear accent */
.cdijum-detail--expediente .cdijum-catalog__modal-row::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: linear-gradient(
        135deg,
        transparent 0 50%,
        #c2202c 50% 100%
    );
    opacity: 0.85;
}
.cdijum-detail--expediente .cdijum-catalog__modal-row dt {
    display: block;
    font-family: var(--cc-font-sans);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a7350;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.cdijum-detail--expediente .cdijum-catalog__modal-row dd {
    display: block;
    font-family: "Lora", Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--cc-ink);
    word-break: break-word;
}

/* "Explorar más" as another tabbed sub-folder */
.cdijum-detail--expediente .cdijum-catalog__related {
    background: #fff;
    border: 1px solid #e8dec9;
    border-radius: 3px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}
.cdijum-detail--expediente .cdijum-catalog__related h3 {
    font-family: var(--cc-font-sans);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a7350;
    border-bottom: 1px solid #e8dec9;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
}

/* Portrait: in expediente mode, looks like a photo paper-clipped on top */
.cdijum-detail--expediente .cdijum-catalog__portrait-figure {
    margin-bottom: 1.75rem;
}
.cdijum-detail--expediente .cdijum-catalog__portrait-figure a {
    border-radius: 2px;
    padding: 10px 10px 28px;
    background: #fff;
    box-shadow:
        0 0 0 1px #d8caac,
        0 14px 30px rgba(80, 50, 10, 0.18);
    transform: rotate(-0.5deg);
    transition: transform 0.18s ease;
}
.cdijum-detail--expediente .cdijum-catalog__portrait-figure a:hover {
    transform: rotate(0deg);
}