/* ============================================================
   Book of Chains – Frontend Styles
   No font-family declarations (handled by Elementor)
   No hardcoded background colors on main wrapper
   ============================================================ */

/* ── CSS Custom Properties ── */
.boc-archive {
    --boc-border:  rgba(201,168,76,0.18);
    --boc-accent:  #c9a84c;
    --boc-glow:    0 0 40px rgba(201,168,76,0.12);
    --boc-radius:  6px;
    --boc-trans:   0.35s cubic-bezier(.25,.8,.25,1);

    position: relative;
    overflow: hidden;
    padding:  60px 40px 80px;
}

.boc-archive > * { position: relative; z-index: 1; }

/* ============================================================
   HEADER
   ============================================================ */
.boc-header {
    text-align:    center;
    margin-bottom: 56px;
    max-width:     640px;
    margin-left:   auto;
    margin-right:  auto;
}

.boc-header__eyebrow {
    display:        block;
    font-size:      11px;
    letter-spacing: .25em;
    text-transform: uppercase;
    margin-bottom:  14px;
}

.boc-header__title {
    font-size:      clamp(28px, 5vw, 52px);
    font-weight:    700;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin:         0 0 18px;
    line-height:    1.1;
}

.boc-header__title::after {
    content:    '';
    display:    block;
    width:      40px;
    height:     1px;
    margin:     16px auto 0;
    opacity:    .6;
}

.boc-header__desc {
    font-size:   16px;
    line-height: 1.75;
    font-style:  italic;
    margin:      0;
}

/* ============================================================
   HERO CARD
   ============================================================ */
.boc-hero {
    position:       relative;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    min-height:     480px;
    transition:     box-shadow var(--boc-trans), transform var(--boc-trans);
    margin-bottom: 120px;
    margin-top: 100px;
}

.boc-hero:hover {
    box-shadow: 0 0 60px rgba(201,168,76,0.22);
    transform:  translateY(-2px);
}

@media (min-width: 768px) {
    .boc-hero { flex-direction: row; min-height: 420px; }
}

.boc-hero__img-wrap {
    position: relative;
    flex:     0 0 55%;
    overflow: hidden;
}

@media (max-width: 767px) {
    .boc-hero__img-wrap { flex: 0 0 260px; }
}

.boc-hero__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.7s ease;
}
.boc-hero:hover .boc-hero__img { transform: scale(1.04); }

.boc-hero__overlay {
    position:   absolute;
    inset:      0;
    pointer-events: none;
}

@media (max-width: 767px) {
    .boc-hero__overlay {
    }
}

.boc-hero__body {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    padding:         40px 44px;
    gap:             14px;
}

.boc-hero__badge {
    font-size:      10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--boc-accent);
}

.boc-hero__title {
    font-size:      clamp(22px, 3vw, 36px);
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin:         0;
    line-height:    1.15;
}

.boc-hero__sub {
    font-size:      11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin:         0;
}

.boc-hero__excerpt {
    font-size:   16px;
    line-height: 1.8;
    font-style:  italic;
    margin:      0;
    max-width:   480px;
}

.boc-hero__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             14px;
    margin-top:      8px;
    padding:         12px 28px;
    border:          1px solid var(--boc-accent);
    color:           var(--boc-accent);
    font-size:       11px;
    letter-spacing:  .18em;
    text-transform:  uppercase;
    text-decoration: none;
    transition:      background var(--boc-trans), color var(--boc-trans);
    align-self:      flex-start;
}

.boc-hero__btn:hover {
    color:           white !important;
    text-decoration: none;
}

.boc-hero__btn-line {
    display:    block;
    width:      24px;
    height:     1px;
    background: currentColor;
    flex-shrink: 0;
}

.boc-hero__fulllink {
    position: absolute;
    inset:    0;
    z-index:  0;
}

/* ============================================================
   FILTER BUTTONS
   ============================================================ */
.boc-filters {
    display:         flex;
    flex-wrap:       wrap;
    gap:             10px;
    justify-content: center;
    margin-bottom:   40px;
}

.boc-filter-btn {
    padding:        9px 22px;
    border:         1px solid rgba(201,168,76,0.3);
    background:     transparent;
    font-size:      10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     border-color var(--boc-trans), color var(--boc-trans), background var(--boc-trans);
    border-radius:  2px;
}

.boc-filter-btn:hover,
.boc-filter-btn.active {
    background: rgba(201,168,76,0.06);
}

/* ============================================================
   CARDS GRID
   ============================================================ */
.boc-cards-grid {
    display: grid;
    gap:     28px;
}

.boc-cards-grid--2col { grid-template-columns: repeat(2, 1fr); }
.boc-cards-grid--3col { grid-template-columns: repeat(3, 1fr); }
.boc-cards-grid--4col { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .boc-cards-grid--3col,
    .boc-cards-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .boc-cards-grid { grid-template-columns: 1fr !important; }
}

/* ── Single Card ── */
.boc-card {
    position:       relative;
    border:         1px solid var(--boc-border);
    border-radius:  var(--boc-radius);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    transition:     transform var(--boc-trans), box-shadow var(--boc-trans), border-color var(--boc-trans);
}

.boc-card:hover {
    transform:    translateY(-4px);
    box-shadow:   0 12px 40px rgba(0,0,0,0.4), 0 0 20px rgba(201,168,76,0.1);
    border-color: rgba(201,168,76,0.4);
}

.boc-card.boc-hidden { display: none; }

.boc-card__img-wrap {
    position:     relative;
    aspect-ratio: auto;
    overflow:     hidden;
}

.boc-card__img-wrap--placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    aspect-ratio:    1 / 1;
}

.boc-card__placeholder-icon {
    font-size: 40px;
    color:     var(--boc-accent);
    opacity:   0.4;
}

.boc-card__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.6s ease;
}

.boc-card:hover .boc-card__img { transform: scale(1.06); }

.boc-card__overlay {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    height:         40%;
    pointer-events: none;
}

/* ── Card Body: tight gap between image and title ── */
.boc-card__body {
    padding:        12px 18px 20px;  /* reduced top padding to close gap */
    display:        flex;
    flex-direction: column;
    gap:            4px;
    flex:           1;
}

.boc-card__title {
    font-size:      13px;
    font-weight:    600;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin:         0;
    line-height:    1.3;
}

.boc-card__badge {
    font-size:      9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--boc-card-accent, var(--boc-accent));
    margin-top:     2px;
}

.boc-card__excerpt {
    font-size:   14px;
    line-height: 1.65;
    font-style:  italic;
    margin:      6px 0 0;
    flex:        1;
}

.boc-card__btn {
    display:         inline-block;
    margin-top:      12px;
    padding:         7px 16px;
    border:          1px solid var(--boc-card-accent, var(--boc-accent));
    color:           var(--boc-card-accent, var(--boc-accent));
    font-size:       9px;
    letter-spacing:  .18em;
    text-transform:  uppercase;
    text-decoration: none;
    transition:      background var(--boc-trans), color var(--boc-trans);
    align-self:      flex-start;
    position:        relative;
    z-index:         2;
}

.boc-card__btn:hover {
    text-decoration: none;
    color: white !important;
}

.boc-no-posts {
    grid-column: 1 / -1;
    text-align:  center;
    font-style:  italic;
    padding:     40px 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .boc-archive    { padding: 40px 20px 60px; }
    .boc-hero__body { padding: 28px; }
}

@media (max-width: 480px) {
    .boc-filters    { gap: 8px; }
    .boc-filter-btn { padding: 7px 14px; }
}

/* ============================================================
   HERO FULL MODE
   Genau wie die Detailseite im Screenshot:
   Bild zentriert oben, Titel + Subtitle, Trennlinie, voller Text
   ============================================================ */
.boc-hero-full {
    max-width:     100%;
    margin:        0 auto 120px;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           0;
}

.boc-hero-full__img-wrap {
    width:         100%;
    max-width:    980px;
    margin-bottom: 36px;
    border-radius: 4px;
    overflow:      hidden;
}

.boc-hero-full .elementor-widget-image img {
    width: 85% !important;
}

.boc-hero-full__img {
    width:      100%;
    height:     auto;
    display:    block;
}

.boc-hero-full__meta {
    text-align: center;
    width:      100%;
    margin-bottom: 32px;
}

.boc-hero-full__title {
    font-size:      clamp(28px, 5vw, 52px);
    font-weight:    700;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin:         0 0 12px;
    line-height:    1.1;
}

.boc-hero-full__sub {
    font-size:      11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin:         0 0 24px;
    opacity:        .6;
}

.boc-hero-full__divider {
    width:      40px;
    height:     1px;
    background: var(--boc-accent, #c9a84c);
    margin:     0 auto;
    opacity:    .6;
}

/* Full-content body — styled like the screenshot */
.boc-hero-full__content {
    width:      100%;
    max-width:  1024px;
    font-size:  17px;
    line-height: 1.85;
    margin-bottom: 40px;
}

.boc-hero-full__content p {
    margin: 0 0 1.4em;
}

/* Blockquote / pull quote like screenshot */
.boc-hero-full__content blockquote,
.boc-hero-full__content .wp-block-quote {
    border-left:  3px solid var(--boc-accent, #c9a84c);
    margin:       2em 0;
    padding:      0.5em 0 0.5em 1.5em;
    font-style:   italic;
    font-size:    20px;
    line-height:  1.6;
    opacity:      .9;
}

.boc-hero-full__content blockquote p,
.boc-hero-full__content .wp-block-quote p {
    margin: 0;
}

/* Links inside content */
.boc-hero-full__content a {
    color:           var(--boc-accent, #c9a84c);
    text-decoration: none;
    border-bottom:   1px solid rgba(201,168,76,0.35);
    transition:      border-color 0.2s;
}
.boc-hero-full__content a:hover {
    border-color: var(--boc-accent, #c9a84c);
}

.boc-hero-full__footer {
    display:    flex;
    justify-content: center;
    margin-top: 8px;
}

@media (max-width: 600px) {
    .boc-hero-full__img-wrap { max-width: 100%; }
    .boc-hero-full__content  { font-size: 16px; }
}