/* ============================================
   THE SMUGGLERS RETREAT — Blog
   Coastal Wellness Palette
   ============================================ */

:root {
    --ocean: #17212B;
    --midnight: #414E5E;
    --moonlight: #FBDBC2;
    --smoke: #C3BAA9;
    --crystal: #F9EFE3;
    --sage: #8D9A83;
}

/* ---------- Hero ---------- */
.blog-hero {
    background: linear-gradient(160deg, var(--ocean) 0%, var(--midnight) 100%);
    padding: 120px 24px 90px;
    text-align: center;
    color: #fff;
}
.blog-hero__inner { max-width: 720px; margin: 0 auto; }
.blog-hero__eyebrow {
    margin: 0 0 10px;
    font-family: "Ubuntu", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--moonlight);
}
.blog-hero__title {
    margin: 0;
    font-family: "Fraunces", serif;
    font-weight: 500;
    font-size: clamp(44px, 6vw, 68px);
    line-height: 1.05;
}
.blog-hero__sub {
    margin: 14px 0 34px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Search ---------- */
.blog-search {
    display: flex;
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.blog-search__input {
    flex: 1 1 auto;
    border: 0;
    padding: 15px 22px;
    font-family: "Ubuntu", sans-serif;
    font-size: 16px;
    color: var(--ocean);
    background: transparent;
    outline: none;
}
.blog-search__input::placeholder { color: var(--smoke); }
.blog-search__btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    border: 0;
    background: var(--sage);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.blog-search__btn:hover, .blog-search__btn:focus-visible { background: var(--midnight); }

/* ---------- Layout ---------- */
.blog-main { background: #EFEFEF; padding: 70px 24px; }
.blog-layout {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 48px;
    align-items: start;
}
@media (max-width: 900px) {
    .blog-layout { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Active filter ---------- */
.blog-active-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    padding: 14px 18px;
    background: #fff;
    border-left: 3px solid var(--sage);
    border-radius: 0;
    font-size: 15px;
    color: var(--midnight);
}
.blog-clear {
    color: var(--midnight);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
}
.blog-clear:hover { text-decoration: underline; }

/* ---------- Grid of cards ---------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}
@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
}

.blog-card {
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(23, 33, 43, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(23, 33, 43, 0.12); }
.blog-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }

.blog-card--featured { grid-column: 1 / -1; }
.blog-card--featured .blog-card__link { flex-direction: row; }
.blog-card--featured .blog-card__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 300px; }
.blog-card--featured .blog-card__body { justify-content: center; padding: 36px; }
.blog-card--featured .blog-card__title { font-size: clamp(26px, 3vw, 34px); }
@media (max-width: 640px) {
    .blog-card--featured .blog-card__link { flex-direction: column; }
    .blog-card--featured .blog-card__media { min-height: 0; }
}

.blog-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--sage);
}
.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--sage), var(--midnight));
}
.blog-card__media--placeholder span {
    font-family: "Fraunces", serif;
    font-size: 64px;
    color: rgba(255, 255, 255, 0.5);
}

.blog-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 22px 24px; }
.blog-card__date {
    font-family: "Ubuntu", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 8px;
}
.blog-card__title {
    margin: 0 0 10px;
    font-family: "Fraunces", serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.25;
    color: var(--ocean);
}
.blog-card__excerpt {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(23, 33, 43, 0.78);
    flex: 1 1 auto;
}
.blog-card__cta {
    font-family: "Ubuntu", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--midnight);
    text-transform: uppercase;
}
.blog-card:hover .blog-card__cta { color: var(--sage); }

/* ---------- Empty state ---------- */
.blog-empty {
    text-align: center;
    padding: 60px 24px;
    background: #fff;
    border-radius: 0;
}
.blog-empty h2 { margin: 0 0 10px; font-family: "Fraunces", serif; color: var(--ocean); font-size: 28px; }
.blog-empty p { margin: 0 0 22px; color: rgba(23, 33, 43, 0.7); }
.blog-empty__btn {
    display: inline-block;
    padding: 12px 22px;
    background: var(--midnight);
    color: #fff;
    text-decoration: none;
    font-family: "Ubuntu", sans-serif;
    font-size: 14px;
    font-weight: 500;
    border-radius: 0;
    transition: background-color 0.2s ease;
}
.blog-empty__btn:hover { background: var(--ocean); }

/* ---------- Sidebar / archive ---------- */
.blog-sidebar { position: sticky; top: 90px; }
.blog-archive {
    background: #fff;
    border-radius: 0;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(23, 33, 43, 0.06);
}
/* Spacing between stacked sidebar cards (Archive + Topics) */
.blog-archive + .blog-archive { margin-top: 20px; }
.blog-archive__title {
    margin: 0 0 16px;
    font-family: "Fraunces", serif;
    font-weight: 500;
    font-size: 22px;
    color: var(--ocean);
}
.blog-archive__empty { margin: 0; color: rgba(23, 33, 43, 0.6); font-size: 14px; }
.blog-archive__list { list-style: none; margin: 0; padding: 0; }
.blog-archive__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 0;
    text-decoration: none;
    color: var(--midnight);
    font-size: 15px;
    transition: background-color 0.15s ease;
}
.blog-archive__link:hover { background: var(--crystal); }
.blog-archive__link.is-active { background: var(--crystal); font-weight: 600; }
.blog-archive__count {
    background: var(--sage);
    color: #fff;
    font-family: "Ubuntu", sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 0;
}

/* ============================================
   ARTICLE PAGE
   ============================================ */
.article { background: #EFEFEF; }

.article-hero { padding: 110px 24px 40px; text-align: center; }
.article-hero__inner { max-width: 760px; margin: 0 auto; }
.article-back {
    display: inline-block;
    margin-bottom: 22px;
    color: var(--midnight);
    text-decoration: none;
    font-family: "Ubuntu", sans-serif;
    font-size: 14px;
    font-weight: 500;
}
.article-back:hover { text-decoration: underline; }
.article-date {
    display: block;
    font-family: "Ubuntu", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 14px;
}
.article-title {
    margin: 0;
    font-family: "Fraunces", serif;
    font-weight: 500;
    font-size: clamp(34px, 4.6vw, 54px);
    line-height: 1.12;
    color: var(--ocean);
}
.article-meta {
    margin-top: 16px;
    font-family: "Ubuntu", sans-serif;
    font-size: 14px;
    color: rgba(23, 33, 43, 0.7);
}
.article-meta__dot { margin: 0 8px; color: var(--smoke); }

/* Large, wide featured image that spans the content width edge-to-edge */
.article-featured {
    max-width: 1180px;
    margin: 0 auto 34px;
    padding: 0;
}
.article-featured img {
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: 0;
    box-shadow: 0 20px 50px rgba(23, 33, 43, 0.16);
    display: block;
}
@media (max-width: 768px) {
    .article-featured img { aspect-ratio: 16 / 9; }
}

.article-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 24px 30px;
    font-size: 18px;
    line-height: 1.85;
    color: rgba(23, 33, 43, 0.88);
}
.article-body h1, .article-body h2, .article-body h3, .article-body h4 {
    font-family: "Fraunces", serif;
    font-weight: 500;
    color: var(--ocean);
    line-height: 1.25;
    margin: 1.6em 0 0.5em;
}
.article-body h1 { font-size: 34px; }
.article-body h2 { font-size: 29px; }
.article-body h3 { font-size: 24px; }
.article-body h4 { font-size: 20px; }
.article-body p { margin: 0 0 1.4em; }
.article-body a { color: var(--midnight); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--ocean); }
.article-body ul, .article-body ol { margin: 0 0 1.4em; padding-left: 26px; }
.article-body li { margin: 0.4em 0; }
.article-body img { max-width: 100%; height: auto; border-radius: 0; }
.article-body .content-image { margin: 2em 0; }
.article-body .content-image figcaption { font-size: 14px; color: rgba(23, 33, 43, 0.6); margin-top: 10px; text-align: center; }
.article-body .content-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 0; margin: 2em 0; }
.article-body .content-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.article-body .content-columns { display: grid; gap: 24px; margin: 1.8em 0; }
.article-body .content-columns--2 { grid-template-columns: 1fr 1fr; }
.article-body .content-columns--3 { grid-template-columns: 1fr 1fr 1fr; }
.article-body .content-divider { border: 0; border-top: 1px solid var(--smoke); margin: 2.4em auto; max-width: 120px; }
.article-body .content-table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: 16px; }
.article-body .content-table th, .article-body .content-table td { border: 1px solid var(--smoke); padding: 12px 14px; text-align: left; }
.article-body .content-table th { background: #fff; font-family: "Ubuntu", sans-serif; font-weight: 600; }
.article-body .content-button { border-radius: 0; font-family: "Ubuntu", sans-serif; }
@media (max-width: 640px) {
    .article-body { font-size: 16px; }
    .article-body .content-columns--2, .article-body .content-columns--3 { grid-template-columns: 1fr; }
}

/* ---------- Article footer / prev-next ---------- */
.article-footer { max-width: 720px; margin: 0 auto; padding: 10px 24px 80px; }
.article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 34px;
}
@media (max-width: 640px) { .article-nav { grid-template-columns: 1fr; } }
.article-nav__item {
    background: #fff;
    border-radius: 0;
    padding: 20px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(23, 33, 43, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.article-nav__item:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(23, 33, 43, 0.12); }
.article-nav__item--next { text-align: right; }
.article-nav__label {
    font-family: "Ubuntu", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sage);
}
.article-nav__title {
    font-family: "Fraunces", serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--ocean);
    line-height: 1.3;
}

.article-missing { max-width: 560px; margin: 0 auto; padding: 120px 24px; text-align: center; }
.article-missing h1 { font-family: "Fraunces", serif; color: var(--ocean); font-size: 34px; margin: 0 0 12px; }
.article-missing p { color: rgba(23, 33, 43, 0.7); margin: 0 0 22px; }

/* ---------- Article tools (listen + share) ---------- */
.article-tools {
    max-width: 720px; margin: 0 auto; padding: 0 24px 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
}
.article-tool {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; background: #fff; border: 1px solid var(--smoke);
    color: var(--midnight); font-family: "Ubuntu", sans-serif; font-size: 13px;
    font-weight: 500; cursor: pointer; text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.article-tool:hover, .article-tool:focus-visible { background: var(--midnight); color: #fff; border-color: var(--midnight); }
.article-tool.is-playing { background: var(--sage); border-color: var(--sage); color: #fff; }
.article-share { display: flex; align-items: center; gap: 8px; }
.article-share__label {
    font-family: "Ubuntu", sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage);
}

/* ---------- Article tags ---------- */
.article-tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* Bottom-of-article variant: left-aligned within the reading column */
.article-tags--bottom {
    justify-content: flex-start;
    max-width: 720px;
    margin: 10px auto 30px;
    padding: 0 24px;
}
.article-tag {
    padding: 6px 14px; background: #fff; border: 1px solid var(--smoke);
    color: var(--midnight); font-family: "Ubuntu", sans-serif; font-size: 13px;
    text-decoration: none; transition: all 0.15s ease;
}
.article-tag:hover { background: var(--sage); border-color: var(--sage); color: #fff; }

/* ---------- Preview banner ---------- */
.article-preview-banner {
    display: inline-block; margin-bottom: 18px; padding: 8px 16px;
    background: var(--moonlight); color: var(--midnight);
    font-family: "Ubuntu", sans-serif; font-size: 13px; font-weight: 600;
    letter-spacing: 0.03em;
}

/* ---------- Pull quote ---------- */
.article-body .content-pullquote {
    margin: 2.4em 0; padding: 0 0 0 26px; border-left: 4px solid var(--sage);
}
.article-body .content-pullquote p {
    font-family: "Fraunces", serif; font-size: clamp(24px, 3vw, 30px);
    font-weight: 500; line-height: 1.35; color: var(--ocean); margin: 0;
}
.article-body .content-pullquote cite {
    display: block; margin-top: 14px; font-family: "Ubuntu", sans-serif;
    font-size: 14px; font-style: normal; color: rgba(23, 33, 43, 0.6);
}
.article-body .content-pullquote cite::before { content: "� "; }

/* ---------- Series strip ---------- */
.article-series { max-width: 720px; margin: 0 auto 30px; padding: 0 24px; }
.article-series__head { margin-bottom: 14px; }
.article-series__label {
    font-family: "Ubuntu", sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage);
}
.article-series__name { margin: 4px 0 0; font-family: "Fraunces", serif; font-weight: 500; font-size: 24px; color: var(--ocean); }
.article-series__list {
    list-style: none; margin: 0; padding: 0; background: #fff;
    border: 1px solid var(--smoke); counter-reset: series;
}
.article-series__list li { counter-increment: series; border-bottom: 1px solid var(--crystal); }
.article-series__list li:last-child { border-bottom: 0; }
.article-series__list a, .article-series__list span {
    display: block; padding: 13px 16px 13px 48px; position: relative;
    color: var(--midnight); text-decoration: none; font-size: 15px;
}
.article-series__list a::before, .article-series__list span::before {
    content: counter(series); position: absolute; left: 16px; top: 50%;
    transform: translateY(-50%); width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: var(--crystal); color: var(--midnight);
    font-family: "Ubuntu", sans-serif; font-size: 12px; font-weight: 600;
}
.article-series__list a:hover { background: var(--crystal); }
.article-series__list li.is-current span { font-weight: 600; color: var(--ocean); }
.article-series__list li.is-current span::before { background: var(--sage); color: #fff; }

/* ---------- Related articles ---------- */
.article-related { max-width: 1100px; margin: 0 auto 40px; padding: 0 24px; }
.article-related__title {
    margin: 0 0 20px; font-family: "Fraunces", serif; font-weight: 500;
    font-size: 26px; color: var(--ocean);
}
.article-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 768px) { .article-related__grid { grid-template-columns: 1fr; } }
.article-related__card {
    background: #fff; overflow: hidden; text-decoration: none;
    box-shadow: 0 2px 8px rgba(23, 33, 43, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex; flex-direction: column;
}
.article-related__card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(23, 33, 43, 0.12); }
.article-related__media { aspect-ratio: 16/10; overflow: hidden; background: var(--sage); }
.article-related__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-related__media--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--sage), var(--midnight)); }
.article-related__media--placeholder span { font-family: "Fraunces", serif; font-size: 44px; color: rgba(255,255,255,0.5); }
.article-related__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.article-related__date { font-family: "Ubuntu", sans-serif; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage); }
.article-related__name { font-family: "Fraunces", serif; font-size: 17px; font-weight: 500; color: var(--ocean); line-height: 1.3; }

/* ---------- Card meta / tags / read time ---------- */
.blog-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.blog-card__readtime { font-family: "Ubuntu", sans-serif; font-size: 12px; color: rgba(23,33,43,0.55); }
.blog-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.blog-card__tag {
    padding: 3px 10px; background: var(--crystal); color: var(--midnight);
    font-family: "Ubuntu", sans-serif; font-size: 11px; font-weight: 500;
    letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---------- Search highlight ---------- */
.blog-card mark, .blog-active-filter mark {
    background: var(--moonlight); color: var(--ocean); padding: 0 2px;
}