/* ============================================================
   FB Photo Feed — Bilingual Program Post Styles
   3 themes: classic, royal, saffron
   ============================================================ */

/* ── Shared base ─────────────────────────────────────────── */
.pbil-wrap {
    max-width: 860px;
    margin: 0 auto 32px;
    font-family: Georgia, serif;
    overflow: hidden;
}

/* Featured image — inset with padding inside hero */
.pbil-featured-img {
    line-height: 0;
    padding: 28px 32px 28px;
}
.pbil-featured-img-inner {
    display: block;
    width: 100%;
}
.pbil-featured-img-inner img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
    border: none;
}
.pbil-featured-placeholder {
    width: 100%;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .5;
    border: 2px dashed;
    margin-bottom: 24px;
}

/* Hero */
.pbil-hero {
    padding: 28px 36px 24px;
    text-align: center;
}
.pbil-featured-img + * ,
.pbil-featured-img ~ h1,
.pbil-hero h1.pbil-title {
    margin-top: 32px !important;
}
.pbil-title {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pbil-title-te { font-size: 28px; }
.pbil-title-en { font-size: 18px; font-weight: 400; }
.pbil-subtitle {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.pbil-meta {
    font-size: 13px;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.pbil-dot { margin: 0 4px; }

/* Tabs */
.pbil-tabs {
    display: flex;
    border-bottom: 2px solid;
}
.pbil-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    background: none;
    transition: all .2s;
}

/* Panel */
.pbil-panel {
    padding: 24px 36px 16px;
    font-size: 16px;
    line-height: 1.9;
}
.pbil-panel p {
    margin-bottom: 10px !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
}

/* Section header */
.pbil-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0 14px;
}
.pbil-section-line {
    flex: 1;
    height: 1px;
}
.pbil-section-badge {
    font-size: 10px;
    letter-spacing: 2px;
    padding: 6px 16px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Quote */
.pbil-quote {
    border-left: 4px solid;
    padding: 14px 20px;
    margin: 14px 0;
}
.pbil-quote p {
    font-style: italic;
    font-size: 17px !important;
    line-height: 1.8 !important;
    margin-bottom: 8px !important;
}
.pbil-quote cite {
    display: block;
    font-size: 11px;
    font-style: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Footer */
.pbil-footer {
    padding: 14px 36px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-top: 2px solid;
}

/* Responsive */
@media (max-width: 600px) {
    .pbil-hero   { padding: 20px 18px 16px; }
    .pbil-panel  { padding: 18px 18px 12px; }
    .pbil-footer { padding: 12px 18px; }
    .pbil-title  { font-size: 22px !important; }
    .pbil-title-en { font-size: 15px; }
}

/* ============================================================
   STYLE 1 — CLASSIC (Dark Brown + Gold)
   ============================================================ */
.pbil-classic {
    background: #fdf8f0;
    border: 1px solid #c8972a;
}
.pbil-classic .pbil-featured-placeholder {
    background: #2d1200;
    color: #c8972a;
}
.pbil-classic .pbil-hero {
    background: #1a0a00;
    border-bottom: 3px solid #c8972a;
}
.pbil-classic .pbil-title    { color: #f5dfa0; }
.pbil-classic .pbil-subtitle { color: #c8972a; }
.pbil-classic .pbil-meta     { color: #e8c878; }
.pbil-classic .pbil-tabs {
    background: #fdf2e0;
    border-color: #c8972a;
}
.pbil-classic .pbil-tab          { color: #8b6030; }
.pbil-classic .pbil-tab:hover    { background: #f0e4c8; }
.pbil-classic .pbil-tab-active   { background: #1a0a00; color: #f5dfa0; }
.pbil-classic .pbil-panel        { color: #3a2010; }
.pbil-classic .pbil-section-line { background: linear-gradient(90deg,transparent,#c8972a,transparent); }
.pbil-classic .pbil-section-badge {
    background: #3d1f00;
    color: #f5dfa0;
    border: 1px solid #c8972a;
}
.pbil-classic .pbil-quote           { border-color: #c8972a; background: #fdf2e0; }
.pbil-classic .pbil-quote p         { color: #4a2e10; }
.pbil-classic .pbil-quote cite      { color: #8b6030; }
.pbil-classic .pbil-footer {
    background: #3d1f00;
    color: #c8972a;
    border-color: #c8972a;
}

/* ============================================================
   STYLE 2 — ROYAL (Deep Maroon + Gold)
   ============================================================ */
.pbil-royal {
    background: #fff8f2;
    border: 1px solid #8b1a1a;
}
.pbil-royal .pbil-featured-placeholder {
    background: #3d0606;
    color: #d4a017;
}
.pbil-royal .pbil-hero {
    background: #5a0a0a;
    border-bottom: 4px solid #d4a017;
}
.pbil-royal .pbil-title    { color: #fff0d0; }
.pbil-royal .pbil-subtitle { color: #d4a017; }
.pbil-royal .pbil-meta     { color: #f5d080; }
.pbil-royal .pbil-tabs {
    background: #f5ece0;
    border-color: #8b1a1a;
}
.pbil-royal .pbil-tab          { color: #8b1a1a; }
.pbil-royal .pbil-tab:hover    { background: #edd8c8; }
.pbil-royal .pbil-tab-active   { background: #5a0a0a; color: #fff0d0; }
.pbil-royal .pbil-panel        { color: #3a0808; }
.pbil-royal .pbil-section-line { background: linear-gradient(90deg,transparent,#8b1a1a,transparent); }
.pbil-royal .pbil-section-badge {
    background: #5a0a0a;
    color: #fff0d0;
    border: 1px solid #d4a017;
}
.pbil-royal .pbil-quote           { border-color: #d4a017; background: #fdf0e0; }
.pbil-royal .pbil-quote p         { color: #5a0a0a; }
.pbil-royal .pbil-quote cite      { color: #8b4513; }
.pbil-royal .pbil-footer {
    background: #5a0a0a;
    color: #d4a017;
    border-color: #d4a017;
}

/* ============================================================
   STYLE 3 — SAFFRON (Saffron + White + Green)
   ============================================================ */
.pbil-saffron {
    background: #fffdf5;
    border: 1px solid #e8720c;
}
.pbil-saffron .pbil-featured-placeholder {
    background: #c05e0a;
    color: #fff3d0;
}
.pbil-saffron .pbil-hero {
    background: #e8720c;
    border-bottom: 4px solid #1a6b1a;
}
.pbil-saffron .pbil-title    { color: #ffffff; }
.pbil-saffron .pbil-subtitle { color: #fff3d0; }
.pbil-saffron .pbil-meta     { color: #fff3d0; }
.pbil-saffron .pbil-tabs {
    background: #fff3e0;
    border-color: #e8720c;
}
.pbil-saffron .pbil-tab          { color: #8b4500; }
.pbil-saffron .pbil-tab:hover    { background: #ffe0b0; }
.pbil-saffron .pbil-tab-active   { background: #e8720c; color: #ffffff; }
.pbil-saffron .pbil-panel        { color: #3a2000; }
.pbil-saffron .pbil-section-line { background: linear-gradient(90deg,transparent,#1a6b1a,transparent); }
.pbil-saffron .pbil-section-badge {
    background: #1a6b1a;
    color: #ffffff;
    border: 1px solid #e8720c;
}
.pbil-saffron .pbil-quote           { border-color: #e8720c; background: #fff3e0; }
.pbil-saffron .pbil-quote p         { color: #5a2800; }
.pbil-saffron .pbil-quote cite      { color: #8b4500; }
.pbil-saffron .pbil-footer {
    background: #1a6b1a;
    color: #ffffff;
    border-color: #e8720c;
}

/* Image → title spacing */
.pbil-featured-img + h1.pbil-title,
.pbil-featured-img ~ h1.pbil-title,
.pbil-featured-placeholder + h1.pbil-title,
.pbil-hero h1.pbil-title { margin-top: 18px !important; }

/* Responsive featured image */
@media (max-width: 600px) {
    .pbil-featured-img     { padding: 12px 14px 0; }
    .pbil-featured-placeholder { width: calc(100% - 28px); margin: 12px 14px 0; }
}