/* Magazine (was the blog until 2026-10-16): index, article, cards.
   Design rules: white ground, hairlines instead of shadows, 4px rectangles, Fraunces titles,
   Outfit text on the fluid scale, labels as plain text (no pills, no tinted badges, no side bars).
   Logical properties only, so Arabic (RTL) mirrors without overrides. */

/* ---------- Shared: meta line, section titles, cards ---------- */
.mag-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0;
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-light);
}

.mag-meta > * + *::before {
    content: "·";
    margin-inline: 0.5rem;
    color: var(--text-light);
}

.mag-meta__category {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

a.mag-meta__category:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html:lang(ar) .mag-meta {
    letter-spacing: 0;
    text-transform: none;
}

.mag-section-title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    margin: 0;
}

.mag-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
}

.mag-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.mag-card__image {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--bg-light);
    margin-bottom: var(--space-2);
}

.mag-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease-out;
}

.mag-card:hover .mag-card__image img {
    transform: scale(1.03);
}

.mag-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

.mag-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mag-card__title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    margin: 0 0 var(--space-1);
}

.mag-card:hover .mag-card__title {
    color: var(--primary-color);
}

.mag-card__excerpt {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-light);
}

.mag-card .link-cta {
    margin-top: auto;
    font-size: var(--text-sm);
}

/* The newest article on the first page of the index: photo and text side by side */
.mag-card--feature {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-4);
    align-items: center;
    padding-bottom: var(--block-gap);
    margin-bottom: var(--block-gap);
    border-bottom: 1px solid var(--border-color);
}

.mag-card--feature .mag-card__image {
    margin-bottom: 0;
}

.mag-card--feature .mag-card__title {
    font-size: var(--text-3xl);
    line-height: 1.15;
    margin-bottom: var(--space-2);
}

.mag-card--feature .mag-card__excerpt {
    font-size: var(--text-base);
}

/* Breadcrumb trail (same look as the product pages, whose rules are scoped to .detail-page) */
.mag-index-head .breadcrumbs ol,
.mag-article-head .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-light);
}

.mag-index-head .breadcrumbs li,
.mag-article-head .breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.mag-index-head .breadcrumbs a,
.mag-article-head .breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.mag-index-head .breadcrumbs a:hover,
.mag-article-head .breadcrumbs a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.mag-index-head .breadcrumbs [aria-current="page"],
.mag-article-head .breadcrumbs [aria-current="page"] {
    color: var(--text-dark);
    font-weight: 500;
}

/* the article title is right below: the last crumb stays on one line */
.mag-article-head .breadcrumbs li:last-child {
    flex: 1 1 0;
}

.mag-article-head .breadcrumbs li:last-child span {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.breadcrumbs .breadcrumb-sep {
    opacity: 0.65;
    user-select: none;
}

html[dir="rtl"] .breadcrumbs .breadcrumb-sep {
    display: inline-block;
    transform: scaleX(-1);
}

/* ---------- Index ---------- */
.mag-index-head {
    padding-top: clamp(1.5rem, 3vw, 2.75rem);
}

.mag-index-head .breadcrumbs {
    margin-bottom: var(--space-3);
}

.mag-index-title {
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--text-dark);
    margin: 0 0 var(--space-2);
}

.mag-index-lead {
    max-width: 60ch;
    margin: 0 0 var(--space-4);
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--text-light);
}

.mag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.mag-filter a {
    padding: 0.75rem 0;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease-out, border-color 0.2s ease-out;
}

.mag-filter a:hover {
    color: var(--text-dark);
}

.mag-filter a.is-active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.mag-index-section {
    padding-top: var(--block-gap);
}

.mag-pagination {
    margin-top: var(--space-5);
}

.mag-empty {
    color: var(--text-light);
}

/* ---------- Article ---------- */
.mag-article-head {
    padding-top: clamp(1.5rem, 3vw, 2.75rem);
}

/* same left edge as the text column below, lines kept to a readable length */
.mag-article-head > * {
    max-width: 880px;
}

.mag-article-head .breadcrumbs {
    margin-bottom: var(--space-3);
}

.mag-article-title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    margin: 0 0 var(--space-2);
}

.mag-article-lead {
    margin: 0 0 var(--space-3);
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--text-dark);
    max-width: 68ch;
}

.mag-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0;
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-light);
}

.mag-byline > * + *::before {
    content: "·";
    margin-inline: 0.5rem;
}

.mag-byline__name {
    font-weight: 600;
    color: var(--text-dark);
}

.mag-article-cover {
    max-width: 1200px;
    margin: 0 auto var(--block-gap);
}

.mag-article-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.mag-article-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    padding-bottom: var(--section-y);
}

.mag-article-main {
    min-width: 0;
    max-width: 720px;
}

/* Sticky column: contents + WhatsApp */
.mag-aside-sticky {
    position: sticky;
    top: calc(var(--top-bar-height) + var(--header-height) + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: calc(100vh - var(--top-bar-height) - var(--header-height) - 3rem);
    overflow-y: auto;
}

.mag-toc__label {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dark);
}

html:lang(ar) .mag-toc__label {
    letter-spacing: 0;
    text-transform: none;
}

.mag-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mag-toc li + li {
    border-top: 1px solid var(--border-color);
}

.mag-toc a {
    display: block;
    padding: 0.55rem 0;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease-out;
}

.mag-toc a:hover,
.mag-toc a.is-current {
    color: var(--text-dark);
}

.mag-toc a.is-current {
    font-weight: 600;
}

/* Phones and tablets: the contents fold above the text */
.mag-toc--inline {
    display: none;
    margin: 0 0 var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 var(--space-3);
}

.mag-toc--inline summary {
    padding: 0.85rem 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
}

.mag-toc--inline[open] summary {
    border-bottom: 1px solid var(--border-color);
}

.mag-aside-cta {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.mag-aside-cta__title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-dark);
    margin: 0 0 var(--space-2);
}

.mag-aside-cta .btn {
    width: 100%;
}

.mag-btn-whatsapp {
    background: #075e54;
    color: #fff;
    gap: 0.5rem;
}

.mag-btn-whatsapp:hover,
.mag-btn-whatsapp:focus-visible {
    background: #0a7569;
    color: #fff;
}

/* Article text (headings in the serif, body on the fluid scale, 68ch measure) */
.mag-article-body {
    max-width: 68ch;
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text-dark);
}

.mag-article-body h2,
.mag-article-body h3,
.mag-article-body h4 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}

.mag-article-body h2 {
    font-size: var(--text-xl);
}

.mag-article-body h3 {
    font-size: var(--text-lg);
}

/* the global reset zeroes p/ul margins, so articles read as one wall of text */
.mag-article-body p,
.mag-article-body ul,
.mag-article-body ol,
.mag-article-body blockquote {
    margin: 0 0 1em;
}

.mag-article-body ul,
.mag-article-body ol {
    padding-inline-start: 1.25em;
}

.mag-article-body ul {
    list-style: disc;
}

.mag-article-body ol {
    list-style: decimal;
}

.mag-article-body li {
    margin-bottom: 0.4em;
}

.mag-article-body a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Images inside an article: full column width, 3:2, small radius, air above and below. */
.mag-article-body img.article-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin: var(--block-gap) 0;
}

/* Experiences the article links to: catalogue rows, photo then title and price */
.mag-experiences {
    margin-top: var(--block-gap);
    padding-top: var(--block-gap);
    border-top: 1px solid var(--border-color);
}

.mag-experiences .mag-section-title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

.mag-experiences__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.mag-experience {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease-out;
}

.mag-experience:hover {
    border-color: var(--primary-color);
}

.mag-experience__image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-light);
}

.mag-experience__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mag-experience__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.mag-experience__title {
    font-weight: 600;
    font-size: var(--text-base);
    line-height: 1.3;
    color: var(--text-dark);
}

.mag-experience__price {
    font-size: var(--text-sm);
    color: var(--text-light);
}

.mag-experience__price strong {
    color: var(--text-dark);
}

.mag-experience .link-cta {
    font-size: var(--text-sm);
}

/* Booking call to action at the end of the text: full hairline frame on a light grey ground */
.mag-cta {
    margin-top: var(--block-gap);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.mag-cta__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-dark);
    margin: 0 0 var(--space-1);
}

.mag-cta__text {
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-dark);
    max-width: 56ch;
}

.mag-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Other articles to read next */
.mag-related {
    border-top: 1px solid var(--border-color);
}

.mag-related__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    .mag-article-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mag-article-main {
        max-width: 720px;
        margin-inline: auto;
        width: 100%;
    }

    .mag-article-aside {
        display: none;
    }

    .mag-toc--inline {
        display: block;
    }

    .mag-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mag-article-head > * {
        max-width: 720px;
    }
}

@media (max-width: 899px) {
    .mag-card--feature {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }
}

@media (max-width: 640px) {
    .mag-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .mag-experiences__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .mag-experience {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .mag-cta {
        padding: var(--space-3);
    }

    .mag-cta__actions .btn {
        width: 100%;
    }

    .mag-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .mag-filter::-webkit-scrollbar {
        display: none;
    }

    .mag-filter a {
        white-space: nowrap;
    }
}