/**
 * Blog vertical — layout styles (archive + single).
 *
 * Ported from ex-snippets 557 (archive .bla-*) and 554 (single .bp-*). The
 * reveal, banner-parallax baseline and lightbox are shared (editorial.css);
 * this file holds blog-specific layout only. Colors come from tokens.css and
 * the snippets' Elementor-era !important is dropped. The single banner's
 * scale(1.15) start state is removed here — .js-parallax owns the transform.
 */

/* ════════════════════════════════════════
   ARCHIVE BLOG (snippet 557)
   ════════════════════════════════════════ */

.bla-wrap { background: var(--cream); padding: 60px 56px 100px; font-family: var(--sans); }

/* ══ HEADER ══ */
.bla-header { margin-bottom: 52px; }
.bla-eyebrow { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: rgba(14, 14, 12, .35); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.bla-eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--yellow); }
.bla-title { font-family: var(--serif); font-size: clamp(36px, 5vw, 68px); font-weight: 700; color: var(--black); letter-spacing: -1.5px; line-height: .95; text-transform: none; margin-bottom: 40px; }

/* ══ FILTER TABS ══ */
.bla-filter { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 40px; border-bottom: 1px solid rgba(14, 14, 12, .1); }
.bla-filter a { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: rgba(14, 14, 12, .45); text-decoration: none; border: 1px solid rgba(14, 14, 12, .15); padding: 8px 16px; transition: background .2s, color .2s, border-color .2s; }
.bla-filter a:hover { background: var(--black); color: var(--cream); border-color: var(--black); }
.bla-filter a.active { background: var(--black); color: var(--cream); border-color: var(--black); }

/* ══ GRID ══ */
.bla-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }

/* ══ CARD ══ */
.bla-card { background: #fff; display: flex; flex-direction: column; text-decoration: none; color: inherit; position: relative; transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s; }
.bla-card:hover { transform: translateY(-5px); box-shadow: 0 20px 52px rgba(14, 14, 12, .1); }
.bla-card::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--yellow); transition: width .55s cubic-bezier(.22, 1, .36, 1); }
.bla-card:hover::after { width: 100%; }
.bla-card-img { width: 100%; aspect-ratio: 16/10; overflow: hidden; position: relative; background: #E0DEDB; }
.bla-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.bla-card:hover .bla-card-img img { transform: scale(1.05); }
.bla-card-cat { position: absolute; bottom: 12px; left: 12px; z-index: 2; background: rgba(14, 14, 12, .72); backdrop-filter: blur(8px); padding: 5px 12px; font-size: 8.5px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 255, 255, .85); transition: background .25s; }
.bla-card:hover .bla-card-cat { background: var(--yellow); color: var(--black); }
.bla-card-body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.bla-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bla-card-date { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: rgba(14, 14, 12, .35); }
.bla-card-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(14, 14, 12, .2); }
.bla-card-read-time { font-size: 9.5px; color: rgba(14, 14, 12, .35); }
.bla-card-title { font-family: var(--serif); font-size: clamp(18px, 2.2vw, 24px); font-weight: 700; color: var(--black); line-height: 1.2; letter-spacing: -.4px; text-transform: none; margin-bottom: 10px; transition: color .2s; }
.bla-card:hover .bla-card-title { color: rgba(14, 14, 12, .7); }
.bla-card-excerpt { font-size: 13px; line-height: 1.8; color: rgba(14, 14, 12, .5); margin-bottom: 20px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bla-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(14, 14, 12, .06); }
.bla-card-cta { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--black); display: flex; align-items: center; gap: 7px; transition: gap .25s; }
.bla-card:hover .bla-card-cta { gap: 13px; }
.bla-card-cta svg { width: 12px; height: 12px; stroke: var(--black); fill: none; stroke-width: 1.5; }

/* ══ EMPTY STATE ══ */
.bla-empty { text-align: center; padding: 80px 0; color: rgba(14, 14, 12, .35); }
.bla-empty-icon { font-size: 40px; margin-bottom: 16px; opacity: .3; }
.bla-empty p { font-size: 14px; letter-spacing: .5px; }

/* ══ PAGINATION ══ */
.bla-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 60px; }
.bla-pagination a, .bla-pagination span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 1px; text-decoration: none; border: 1px solid rgba(14, 14, 12, .15); color: rgba(14, 14, 12, .5); transition: background .2s, color .2s, border-color .2s; }
.bla-pagination a:hover { background: var(--black); color: var(--cream); border-color: var(--black); }
.bla-pagination .current { background: var(--black); color: var(--cream); border-color: var(--black); }
.bla-pagination .dots { border: none; color: rgba(14, 14, 12, .3); }

/* ══ RESPONSIVE (archive) ══ */
@media (max-width: 1100px) { .bla-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .bla-wrap { padding: 48px 20px 72px; } }
@media (max-width: 640px) { .bla-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ════════════════════════════════════════
   SINGLE BLOG (snippet 554)
   ════════════════════════════════════════ */

/* ══ BANNER ══ */
.bp-banner { width: 100%; height: 72vh; min-height: 460px; position: relative; overflow: hidden; background: var(--black); }
.bp-banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bp-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14, 14, 12, .1) 0%, rgba(14, 14, 12, .5) 100%); }
.bp-banner-cat { position: absolute; bottom: 32px; left: 56px; z-index: 2; font-size: 9px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--black); background: var(--yellow); padding: 6px 14px; font-weight: 600; font-family: var(--sans); }
.bp-banner-meta { position: absolute; bottom: 38px; right: 56px; z-index: 2; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .5); display: flex; align-items: center; gap: 16px; font-family: var(--sans); }
.bp-banner-meta span { display: flex; align-items: center; gap: 6px; }
.bp-banner-meta span::before { content: ""; width: 1px; height: 12px; background: rgba(255, 255, 255, .2); }
.bp-banner-meta span:first-child::before { display: none; }

/* ══ TITLE ══ */
.bp-title-block { max-width: 820px; margin: 0 auto; padding: 64px 40px 52px; border-bottom: 1px solid rgba(14, 14, 12, .1); }
.bp-title { font-family: var(--serif); font-size: clamp(38px, 5.5vw, 70px); font-weight: 700; font-style: normal; color: var(--black); line-height: .98; letter-spacing: -2px; margin-bottom: 28px; text-transform: none; }
.bp-lead { font-size: clamp(16px, 1.6vw, 19px); font-weight: 300; line-height: 1.8; color: rgba(14, 14, 12, .6); font-family: var(--sans); }

/* ══ BODY TEXT ══ */
.bp-text { max-width: 820px; margin: 0 auto; padding: 52px 40px; }
.bp-text p { font-size: clamp(15px, 1.45vw, 17.5px); font-weight: 300; line-height: 2; color: rgba(14, 14, 12, .72); margin-bottom: 24px; font-family: var(--sans); }
.bp-text p:last-child { margin-bottom: 0; }
.bp-text p strong { color: var(--black); font-weight: 600; }
.bp-text h2 { font-family: var(--serif); font-size: clamp(24px, 3vw, 40px); font-weight: 700; font-style: normal; color: var(--black); letter-spacing: -.5px; line-height: 1.1; margin: 12px 0 20px; text-transform: none; }
.bp-text h3 { font-size: clamp(15px, 1.4vw, 17px); font-weight: 600; color: var(--black); margin: 32px 0 12px; letter-spacing: .2px; font-family: var(--sans); }

/* ══ INLINE PHOTO ══ */
.bp-photo { width: 100%; max-width: 1100px; margin: 0 auto; overflow: hidden; }
.bp-photo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.bp-photo-caption { max-width: 820px; margin: 0 auto; padding: 12px 40px 0; font-size: 11px; letter-spacing: 1px; color: rgba(14, 14, 12, .38); font-family: var(--sans); }

/* ══ GALLERY ══ */
.bp-gallery { padding: 56px 56px 80px; background: var(--cream); }
.bp-gallery-label { max-width: 820px; margin: 0 auto 32px; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: rgba(14, 14, 12, .35); display: flex; align-items: center; gap: 10px; font-family: var(--sans); }
.bp-gallery-label::before { content: ""; width: 16px; height: 1px; background: var(--yellow); }
.bp-gallery-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; max-width: 1100px; margin: 0 auto; }
.bp-gitem { overflow: hidden; position: relative; cursor: pointer; }
.bp-gitem:first-child { grid-column: 1/3; }
.bp-gitem:nth-child(2) { grid-column: 3/4; }
.bp-gitem img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.bp-gitem:first-child img { aspect-ratio: 16/9; }
.bp-gitem:hover img { transform: scale(1.04); }
.bp-gitem-overlay { position: absolute; inset: 0; background: rgba(14, 14, 12, 0); transition: background .4s; }
.bp-gitem:hover .bp-gitem-overlay { background: rgba(14, 14, 12, .15); }
.bp-gitem-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: opacity .3s, transform .3s; width: 40px; height: 40px; background: rgba(255, 255, 255, .9); display: flex; align-items: center; justify-content: center; z-index: 2; }
.bp-gitem:hover .bp-gitem-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bp-gitem-icon svg { width: 16px; height: 16px; stroke: var(--black); fill: none; stroke-width: 1.6; }

/* ══ TAGS ══ */
.bp-tags { max-width: 820px; margin: 0 auto; padding: 0 40px 64px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid rgba(14, 14, 12, .08); }
.bp-tag { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: rgba(14, 14, 12, .5); border: 1px solid rgba(14, 14, 12, .15); padding: 6px 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; text-decoration: none; font-family: var(--sans); }
.bp-tag:hover { background: var(--black); color: var(--cream); border-color: var(--black); }

/* ══ RELATED ══ */
.bp-related { background: #fff; padding: 80px 56px; }
.bp-related-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; }
.bp-related-eyebrow { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: rgba(14, 14, 12, .35); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; font-family: var(--sans); }
.bp-related-eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--yellow); }
.bp-related-title { font-family: var(--serif); font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; font-style: normal; color: var(--black); letter-spacing: -.8px; line-height: 1.05; text-transform: none; }
.bp-all-link { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--black); text-decoration: none; border-bottom: 1px solid rgba(14, 14, 12, .2); padding-bottom: 3px; display: flex; align-items: center; gap: 8px; transition: gap .25s, border-color .25s; white-space: nowrap; align-self: flex-end; font-family: var(--sans); }
.bp-all-link:hover { gap: 14px; }
.bp-all-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.bp-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bp-rcard { text-decoration: none; color: inherit; display: block; }
.bp-rcard-img { aspect-ratio: 16/10; overflow: hidden; }
.bp-rcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.bp-rcard:hover .bp-rcard-img img { transform: scale(1.05); }
.bp-rcard-body { padding: 18px 0 0; }
.bp-rcard-cat { font-size: 8.5px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(14, 14, 12, .4); margin-bottom: 8px; font-family: var(--sans); }
.bp-rcard-title { font-size: 15px; font-weight: 600; color: var(--black); line-height: 1.35; margin-bottom: 10px; font-family: var(--sans); }
.bp-rcard-date { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(14, 14, 12, .35); font-family: var(--sans); }

/* ══ RESPONSIVE (single) ══ */
@media (max-width: 1100px) {
    .bp-related-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 900px) {
    .bp-banner-cat { left: 20px; bottom: 20px; }
    .bp-banner-meta { right: 20px; bottom: 26px; }
    .bp-title-block, .bp-text, .bp-photo-caption, .bp-tags { padding-left: 20px; padding-right: 20px; }
    .bp-title-block { padding-top: 44px; padding-bottom: 36px; }
    .bp-gallery { padding: 36px 20px 52px; }
    .bp-gallery-grid { grid-template-columns: 1fr 1fr; }
    .bp-gitem:first-child { grid-column: 1/3; }
    .bp-gitem:nth-child(n+3) { grid-column: unset; }
    .bp-related { padding: 52px 20px; }
    .bp-related-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 600px) {
    .bp-related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .bp-banner { height: 55vw; min-height: 300px; }
    .bp-gallery-grid { grid-template-columns: 1fr; }
    .bp-gitem:first-child, .bp-gitem:nth-child(n) { grid-column: unset; }
}