/* ─────────────────────────────────────────────────────────────────────────
   blocks.css  —  Frontend rendering styles for the block editor output
   ───────────────────────────────────────────────────────────────────────── */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.blocks-renderer {
    --blocks-gap: 2rem;
    display: flex;
    flex-direction: column;
    gap: var(--blocks-gap);
}

/* ── Rich Text ───────────────────────────────────────────────────────────── */
.blocks-rich-text {
    line-height: 1.8;
}
.blocks-rich-text img { max-width: 100%; height: auto; border-radius: .375rem; }
.blocks-rich-text table { width: 100%; border-collapse: collapse; }
.blocks-rich-text td, .blocks-rich-text th { border: 1px solid #dee2e6; padding: .5rem; }

/* ── Heading ─────────────────────────────────────────────────────────────── */
.blocks-heading { margin: 0; }

/* ── Paragraph ───────────────────────────────────────────────────────────── */
.blocks-paragraph { margin: 0; line-height: 1.75; }

/* ── Quote ───────────────────────────────────────────────────────────────── */
.blocks-quote {
    border-left: 4px solid #6c757d;
    padding: 1rem 1.5rem;
    margin: 0;
    background: #f8f9fa;
    border-radius: 0 .5rem .5rem 0;
}
.blocks-quote p { font-size: 1.125rem; font-style: italic; margin-bottom: .5rem; }
.blocks-quote cite { font-size: .875rem; color: #6c757d; font-style: normal; }

/* ── Image ───────────────────────────────────────────────────────────────── */
.blocks-image { margin: 0; }
.blocks-image img { max-width: 100%; height: auto; border-radius: .5rem; display: block; }
.blocks-image figcaption { margin-top: .5rem; font-size: .875rem; color: #6c757d; text-align: center; }
.blocks-image--center { display: flex; flex-direction: column; align-items: center; }
.blocks-image--left img { margin-right: auto; }
.blocks-image--right { display: flex; flex-direction: column; align-items: flex-end; }

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.blocks-gallery {
    display: grid;
    gap: .75rem;
}
.blocks-gallery--cols-1 { grid-template-columns: 1fr; }
.blocks-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.blocks-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.blocks-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    .blocks-gallery--cols-3,
    .blocks-gallery--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .blocks-gallery--cols-2,
    .blocks-gallery--cols-3,
    .blocks-gallery--cols-4 { grid-template-columns: 1fr; }
}
.blocks-gallery__item { display: block; overflow: hidden; border-radius: .375rem; }
.blocks-gallery__item img {
    width: 100%; height: 200px; object-fit: cover; display: block;
    transition: transform .3s ease;
}
.blocks-gallery__item:hover img { transform: scale(1.05); }

/* ── Video ───────────────────────────────────────────────────────────────── */
.blocks-video__embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: .5rem;
}
.blocks-video__embed iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}
.blocks-video__native { width: 100%; border-radius: .5rem; }
.blocks-video__caption { margin-top: .5rem; font-size: .875rem; color: #6c757d; text-align: center; }

/* ── Accordion ───────────────────────────────────────────────────────────── */
.blocks-accordion {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}
.blocks-accordion__item {
    border: 1px solid var(--border, #e8eaed);
    border-radius: .5rem;
    overflow: hidden;
}
.blocks-accordion__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .875rem 1.25rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    list-style: none;
    background: #fff;
    transition: background .15s, color .15s;
    margin: 0;
}
.blocks-accordion__title::-webkit-details-marker { display: none; }
.blocks-accordion__title::after {
    content: '+';
    font-size: 1.375rem;
    font-weight: 300;
    flex-shrink: 0;
    color: var(--teal, #2B8C8A);
    line-height: 1;
    transition: content .2s;
}
.blocks-accordion__item[open] > .blocks-accordion__title {
    background: var(--teal, #2B8C8A);
    color: #fff;
}
.blocks-accordion__item[open] > .blocks-accordion__title::after {
    content: '−';
    color: #fff;
}
.blocks-accordion__body {
    padding: 1rem 1.25rem;
    background: #fff;
    border-top: 1px solid var(--border-light, #f0f1f3);
    line-height: 1.75;
    color: #444;
}

/* ── Timeline ────────────────────────────────────────────────────────────── */
.blocks-timeline { position: relative; padding-left: 2rem; }
.blocks-timeline::before {
    content: '';
    position: absolute; left: .625rem; top: 0; bottom: 0;
    width: 2px; background: #dee2e6;
}
.blocks-timeline__item {
    position: relative;
    padding-bottom: 1.75rem;
    padding-left: 1rem;
}
.blocks-timeline__item::before {
    content: '';
    position: absolute; left: -1.375rem; top: .375rem;
    width: .75rem; height: .75rem;
    border-radius: 50%;
    background: var(--teal, #2B8C8A);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--teal, #2B8C8A);
}
.blocks-timeline__date {
    display: inline-block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--teal, #2B8C8A);
    margin-bottom: .25rem;
}
.blocks-timeline__title { display: block; margin-bottom: .25rem; }
.blocks-timeline__content p { margin: 0; color: #6c757d; }

/* ── Icon Boxes ──────────────────────────────────────────────────────────── */
.blocks-icon-boxes {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
.blocks-icon-boxes--cols-2 { grid-template-columns: repeat(2, 1fr); }
.blocks-icon-boxes--cols-3 { grid-template-columns: repeat(3, 1fr); }
.blocks-icon-boxes--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    .blocks-icon-boxes--cols-3,
    .blocks-icon-boxes--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .blocks-icon-boxes--cols-2,
    .blocks-icon-boxes--cols-3,
    .blocks-icon-boxes--cols-4 { grid-template-columns: 1fr; }
}
.blocks-icon-box {
    padding: 1.5rem;
    height: 100%;
}
.blocks-icon-box--card {
    background: #fff;
    border: 1px solid var(--border, #e8eaed);
    border-radius: .75rem;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06));
    transition: box-shadow .2s, transform .2s;
}
.blocks-icon-box--card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
    transform: translateY(-2px);
}
.blocks-icon-box__icon {
    font-size: 2.5rem;
    color: var(--teal, #2B8C8A);
    display: block;
    margin-bottom: .75rem;
}
.blocks-icon-box__title { margin-bottom: .5rem; font-weight: 600; }
.blocks-icon-box__body { color: #6c757d; margin: 0; line-height: 1.65; }

/* ── Columns ─────────────────────────────────────────────────────────────── */
.blocks-columns {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: var(--blocks-col-template, 1fr 1fr);
}
@media (max-width: 768px) {
    .blocks-columns { grid-template-columns: 1fr; }
}
.blocks-column-content { line-height: 1.75; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.blocks-cards {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
.blocks-cards--cols-2 { grid-template-columns: repeat(2, 1fr); }
.blocks-cards--cols-3 { grid-template-columns: repeat(3, 1fr); }
.blocks-cards--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    .blocks-cards--cols-3,
    .blocks-cards--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .blocks-cards--cols-2,
    .blocks-cards--cols-3,
    .blocks-cards--cols-4 { grid-template-columns: 1fr; }
}
.blocks-card {
    background: #fff;
    border: 1px solid var(--border, #e8eaed);
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06));
    transition: box-shadow .2s, transform .2s;
}
.blocks-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
    transform: translateY(-2px);
}
.blocks-card__img { width: 100%; height: 200px; object-fit: cover; display: block; }
.blocks-card__body { padding: 1.25rem; flex: 1; }
.blocks-card__title { font-size: 1.0625rem; font-weight: 700; margin-bottom: .5rem; }
.blocks-card__text { color: #6c757d; margin: 0; line-height: 1.65; }
.blocks-card__footer {
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--border-light, #f0f1f3);
}
.blocks-card__link {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-weight: 600;
    font-size: .875rem;
    color: var(--teal, #2B8C8A);
    text-decoration: none;
    transition: color .15s;
}
.blocks-card__link:hover { color: var(--teal-dark, #1E6B69); }
.blocks-card__link::after { content: ' →'; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.blocks-tabs__nav {
    display: flex;
    gap: .25rem;
    border-bottom: 2px solid var(--border, #e8eaed);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.blocks-tabs__btn {
    padding: .625rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-weight: 600;
    font-size: .9375rem;
    color: #6c757d;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    font-family: inherit;
}
.blocks-tabs__btn:hover { color: var(--teal, #2B8C8A); }
.blocks-tabs__btn.is-active {
    color: var(--teal, #2B8C8A);
    border-bottom-color: var(--teal, #2B8C8A);
}
.blocks-tabs__panel { display: none; line-height: 1.75; }
.blocks-tabs__panel.is-active { display: block; }

/* ── CTA Banner ──────────────────────────────────────────────────────────── */
.blocks-cta-banner {
    padding: 3rem 1.5rem;
    border-radius: .75rem;
    text-align: center;
}
.blocks-cta-banner__inner { max-width: 700px; margin: 0 auto; }
.blocks-cta-banner__title { font-size: 1.875rem; font-weight: 700; margin-bottom: .75rem; }
.blocks-cta-banner__subtitle { font-size: 1.125rem; opacity: .9; margin-bottom: 1.5rem; }
.blocks-cta-banner__btn {
    background: rgba(255,255,255,.2);
    border: 2px solid currentColor;
    color: inherit;
    padding: .625rem 1.75rem;
    border-radius: 2rem;
    font-weight: 600;
    transition: background .2s;
}
.blocks-cta-banner__btn:hover { background: rgba(255,255,255,.35); color: inherit; }

/* ── Divider ─────────────────────────────────────────────────────────────── */
.blocks-divider { margin: 0 auto; border-top-width: 2px; opacity: 1; }
.blocks-divider--dashed  { border-style: dashed; }
.blocks-divider--dotted  { border-style: dotted; }
.blocks-divider--double  { border-style: double; border-top-width: 6px; }