/* ============================================================
   Page Builder — Frontend Block Styles
   ============================================================ */

/* ── Page builder main wrapper (no max-width, blocks own their container) ────*/
.pb-main { max-width: 100%; margin: 0; padding: 0; }

/* ── Containers ──────────────────────────────────────────────────────────────*/
.pb-block { position: relative; box-sizing: border-box; width: 100%; }
.pb-block * { box-sizing: border-box; }

.pb-container       { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.pb-container-wide  { max-width: 1440px; margin: 0 auto; padding: 0 28px; }
.pb-container-full  { width: 100%; padding: 0 28px; }

.pb-bg-overlay {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.pb-block > .pb-container,
.pb-block > .pb-container-wide,
.pb-block > .pb-container-full { position: relative; z-index: 1; }

/* ── Responsive visibility ───────────────────────────────────────────────────*/
@media (max-width: 767px)  { .pb-hide-mobile  { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .pb-hide-tablet  { display: none !important; } }
@media (min-width: 1025px) { .pb-hide-desktop { display: none !important; } }

/* ── Animations ──────────────────────────────────────────────────────────────*/
.pb-anim-fade-up,
.pb-anim-fade-in,
.pb-anim-slide-left,
.pb-anim-slide-right { opacity: 0; transition: opacity .55s ease, transform .55s ease; }
.pb-anim-fade-up    { transform: translateY(28px); }
.pb-anim-slide-left { transform: translateX(-28px); }
.pb-anim-slide-right{ transform: translateX(28px); }
.pb-anim-visible    { opacity: 1; transform: none !important; }

/* ── Section header ──────────────────────────────────────────────────────────*/
.pb-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.pb-section-heading {
    font-family: var(--font-display); font-size: 1.9rem;
    font-weight: 600; letter-spacing: -.02em;
}

/* ── Grid columns ────────────────────────────────────────────────────────────*/
.pb-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pb-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pb-grid-cols-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ── Card layout reset — cards are always left-aligned regardless of block setting */
.pb-block .news-card,
.pb-block .pb-feat-card,
.pb-block .pb-feat-body { text-align: left; }

/* ═══════════════════════════════════════════════
   HERO BLOCK
═══════════════════════════════════════════════ */
.pb-hero {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; padding: 20px 0;
}
.pb-hero--left    { align-items: flex-start; text-align: left; }
.pb-hero--centered { align-items: center; text-align: center; }
.pb-hero--split {
    flex-direction: row; align-items: center;
    justify-content: space-between; gap: 40px;
}
.pb-hero-text { flex: 1; }
.pb-hero-image { flex: 1; }
.pb-hero-image img {
    width: 100%; border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    object-fit: cover; max-height: 480px;
}
.pb-hero-heading {
    font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 700; line-height: 1.1; letter-spacing: -.03em;
    color: var(--paper); margin-bottom: 14px;
}
.pb-hero-sub {
    font-size: clamp(1rem, 2vw, 1.22rem);
    color: var(--paper-dim); max-width: 640px; margin: 0 auto 10px;
    line-height: 1.55;
}
.pb-hero--left .pb-hero-sub { margin: 0 0 10px; }
.pb-hero-body {
    color: var(--paper-dim); margin-bottom: 10px; max-width: 600px;
}
.pb-hero-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
    justify-content: center; margin-top: 28px;
}
.pb-hero--left .pb-hero-actions { justify-content: flex-start; }

/* ═══════════════════════════════════════════════
   FEATURED POSTS — MAGAZINE
═══════════════════════════════════════════════ */
.pb-featured-magazine {
    display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start;
}
.pb-feat-lead { }
.pb-feat-image {
    display: block; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
    background: var(--ink-3); margin-bottom: 18px; border: 1px solid var(--line);
}
.pb-feat-image img { width: 100%; height: 100%; object-fit: cover; }
.pb-feat-image span {
    display: flex; align-items: center; justify-content: center;
    height: 100%; font-size: 3rem; font-family: var(--font-display);
    color: var(--accent);
}
.pb-feat-body h3 {
    font-family: var(--font-display); font-size: 1.6rem;
    line-height: 1.2; margin: 10px 0 10px; color: var(--paper);
}
.pb-feat-body h3 a { color: inherit; }
.pb-feat-body h3 a:hover { color: var(--accent-warm); }
.pb-feat-body p { color: var(--paper-dim); font-size: .95rem; }

.pb-feat-stack { display: flex; flex-direction: column; gap: 18px; }
.pb-feat-card  { display: flex; gap: 14px; align-items: flex-start; }
.pb-feat-card-img {
    width: 90px; height: 64px; flex-shrink: 0;
    border-radius: 6px; overflow: hidden; background: var(--ink-3);
    border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.pb-feat-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pb-feat-card-img span { font-size: 1.4rem; font-family: var(--font-display); color: var(--accent); }
.pb-feat-card h4 { font-size: 0.95rem; line-height: 1.3; color: var(--paper); margin-top: 4px; }
.pb-feat-card h4 a { color: inherit; }
.pb-feat-card h4 a:hover { color: var(--accent-warm); }

/* ═══════════════════════════════════════════════
   CTA BLOCK
═══════════════════════════════════════════════ */
.pb-cta {
    display: flex; gap: 28px; align-items: center;
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: 14px; padding: 36px 40px;
}
.pb-cta--centered { flex-direction: column; text-align: center; }
.pb-cta--side-by-side { flex-direction: row; justify-content: space-between; }
.pb-cta-text { flex: 1; }
.pb-cta-text h2 { font-size: 1.75rem; margin-bottom: 8px; }
.pb-cta-text p  { color: var(--paper-dim); }
.pb-cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.pb-cta--centered .pb-cta-actions { justify-content: center; margin-top: 20px; }

/* ═══════════════════════════════════════════════
   NEWSLETTER BLOCK
═══════════════════════════════════════════════ */
.pb-newsletter { max-width: 520px; margin: 0 auto; }
.pb-newsletter-heading { font-size: 1.75rem; margin-bottom: 8px; }
.pb-newsletter-sub     { color: var(--paper-dim); margin-bottom: 20px; }
.pb-newsletter-form {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.pb-newsletter-form input[type="email"] {
    flex: 1; min-width: 200px; background: var(--ink-2);
    border: 1px solid var(--line); border-radius: 8px;
    color: var(--paper); padding: 11px 16px; font-size: .95rem; font-family: var(--font-body);
}
.pb-newsletter-form input[type="email"]:focus {
    outline: none; border-color: var(--accent);
}

/* ═══════════════════════════════════════════════
   ABOUT BLOCK
═══════════════════════════════════════════════ */
.pb-about {
    display: grid; gap: 40px; align-items: center;
}
.pb-about--text-image { grid-template-columns: 1fr 420px; }
.pb-about--image-text { grid-template-columns: 420px 1fr; }
.pb-about--text-only  { grid-template-columns: 1fr; max-width: 720px; }
.pb-about--image-text .pb-about-text { order: 2; }
.pb-about--image-text .pb-about-image{ order: 1; }
.pb-about-text h2 { font-size: 1.85rem; margin-bottom: 16px; }
.pb-about-body { color: var(--paper-dim); line-height: 1.7; }
.pb-about-image img {
    width: 100%; border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,.35);
    object-fit: cover; max-height: 420px;
}

/* ═══════════════════════════════════════════════
   TESTIMONIALS BLOCK
═══════════════════════════════════════════════ */
.pb-testimonials {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.pb-testimonial {
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: 12px; padding: 28px;
}
.pb-testimonial-quote {
    font-family: var(--font-display); font-size: 1.1rem;
    color: var(--paper-dim); line-height: 1.6; margin-bottom: 18px;
    font-style: italic;
}
.pb-testimonial-author { display: flex; align-items: center; gap: 12px; }
.pb-testimonial-avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--line); flex-shrink: 0;
}
.pb-testimonial-author strong { display: block; font-size: .92rem; }
.pb-testimonial-role {
    font-size: .8rem; color: var(--paper-mute); display: block; margin-top: 2px;
}

/* ═══════════════════════════════════════════════
   STATS BLOCK
═══════════════════════════════════════════════ */
.pb-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px;
}
.pb-stat { padding: 24px 16px; }
.pb-stat-number {
    font-family: var(--font-display); font-size: 2.8rem;
    font-weight: 700; color: var(--accent); line-height: 1;
    margin-bottom: 8px;
}
.pb-stat-label { font-size: .9rem; color: var(--paper-mute); text-transform: uppercase; letter-spacing: .06em; }

/* ═══════════════════════════════════════════════
   BANNER BLOCK
═══════════════════════════════════════════════ */
.pb-banner { }
.pb-banner-img { max-width: 100%; border-radius: 8px; height: auto; }
.pb-banner-img.full-width { width: 100%; }

/* ═══════════════════════════════════════════════
   NAV DROPDOWN (for menus with children)
═══════════════════════════════════════════════ */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown > a { display: flex; align-items: center; gap: 4px; }
.nav-dd-arrow { font-size: .65rem; }
.nav-dropdown-menu {
    position: absolute; top: 100%; left: 0; min-width: 180px;
    background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px;
    padding: 6px; z-index: 100;
    opacity: 0; pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1; pointer-events: auto; transform: none;
}
.nav-dropdown-menu a {
    display: block; padding: 8px 12px; border-radius: 6px;
    font-size: .9rem; color: var(--paper-dim);
}
.nav-dropdown-menu a:hover { background: var(--ink-3); color: var(--paper); }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
    .pb-featured-magazine { grid-template-columns: 1fr; }
    .pb-feat-stack { flex-direction: row; flex-wrap: wrap; }
    .pb-feat-card  { width: calc(50% - 9px); }
    .pb-about--text-image,
    .pb-about--image-text { grid-template-columns: 1fr; }
    .pb-about--image-text .pb-about-text  { order: 1; }
    .pb-about--image-text .pb-about-image { order: 2; }
    .pb-cta--side-by-side { flex-direction: column; }
    .pb-hero--split { flex-direction: column; }
}
@media (max-width: 600px) {
    .pb-container, .pb-container-wide, .pb-container-full { padding: 0 18px; }
    .pb-hero-actions { flex-direction: column; align-items: stretch; }
    .pb-hero-actions .btn { width: 100%; text-align: center; }
    .pb-grid-cols-2, .pb-grid-cols-3, .pb-grid-cols-4 { grid-template-columns: 1fr; }
    .pb-stats { grid-template-columns: repeat(2, 1fr); }
    .pb-feat-card { width: 100%; }
    .pb-cta { padding: 24px 20px; }
    .pb-section-heading { font-size: 1.5rem; }
}

/* ── Animation init script (add to footer) ───────────────────────────────────*/