/* =========================================
   WEDDING EDITORIAL
   Maria & Nikos
   Visual overrides for the Codrops template
   ========================================= */

:root {
    --wedding-bg: #f5f0e7;
    --wedding-paper: #fbf9f4;
    --wedding-olive: #59634b;
    --wedding-olive-light: #a5aa91;
    --wedding-ink: #35352e;
    --wedding-muted: #817b70;
    --wedding-line: #dcd3c5;
}

/* =========================================
   PAGE AND TYPOGRAPHY
   ========================================= */

html,
body,
main {
    background: var(--wedding-bg);
}

body {
    color: var(--wedding-ink);
    font-family: Georgia, "Times New Roman", serif;
}

.frame {
    color: var(--wedding-olive);
}

.frame__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
}

.frame__title-main {
    margin: 0;
    color: #34382e;
    font-family: "Palatino Linotype", "Book Antiqua",
                 "Noto Serif", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 1.1;
}

.wedding-kicker {
    display: block;
    color: #788066;
    font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.7;
}

.wedding-amp {
    color: #788066;
    font-style: italic;
}

.wedding-date {
    margin: 0.3rem 0 0;
    color: #77766a;
    font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.frame__credits {
    color: var(--wedding-muted);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    line-height: 1.8;
}

/* =========================================
   EDITORIAL CARDS
   Keep layout controlled by base.css
   ========================================= */

.content,
.item {
    color: var(--wedding-ink);
}

.item__meta {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--wedding-olive);
    font-size: 0.62rem;
    letter-spacing: 0.17em;
    line-height: 1.7;
}

.item__title {
    color: var(--wedding-ink);
    font-family: "Palatino Linotype", "Book Antiqua",
                 Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 1.15;
}

.item__desc {
    max-width: 32rem;
    color: var(--wedding-muted);
    font-size: 0.92rem;
    line-height: 1.9;
}

.item__img {
    overflow: hidden;
    background-color: #e7ddcc;
}

.item__img-inner {
    background-position: center;
    background-size: cover;
    transition:
        filter 350ms ease;
}

.item:hover .item__img-inner {
    filter: saturate(0.92);
}

/* Understated editorial link */

.item__link {
    display: inline-block;
    margin-top: 0.25rem;
    padding-bottom: 0.4rem;
    color: var(--wedding-olive);
    border-bottom: 1px solid #c9cbb9;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-decoration: none;
    cursor: pointer;
    transition:
        color 250ms ease,
        border-color 250ms ease;
}

.item__link:hover {
    color: #858b70;
    border-color: #858b70;
}

/* =========================================
   EXPANDED PREVIEWS
   Preserve the original Codrops animations
   ========================================= */

.previews {
    color: var(--wedding-ink);
}

.preview {
    background-color: var(--color-bg);
    color: var(--wedding-ink) !important;
}

/* Large heading over the preview image */

.preview .preview__title,
.preview .preview__title .oh__inner {
    color: #fffdf8 !important;
    font-family: "Palatino Linotype", "Book Antiqua",
                 Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.045em;
}

/* Preview text and animated text wrappers */

.preview .oh,
.preview .oh__inner,
.preview .preview__column,
.preview .preview__column p {
    color: #34382e !important;
}

.preview .preview__column {
    line-height: 1.85;
}

.preview .preview__column p {
    line-height: 1.9;
}

/* Information headings */

.preview .preview__column-title {
    color: #34382e !important;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.preview .preview__column-title--main,
.preview .preview__column-title--main .oh__inner {
    color: #59634b !important;
}

/* Back control */

.preview .preview__back {
    color: #34382e !important;
    cursor: pointer;
}

.preview .preview__back svg {
    stroke: currentColor !important;
}

.preview .preview__back:hover {
    color: var(--wedding-olive) !important;
}

.preview .preview__back:hover svg {
    stroke: currentColor !important;
}

/* Preview image */

.preview__img {
    overflow: hidden;
    background: #e7ddcc;
}

.preview__img-inner {
    background-position: center;
    background-size: cover;
}

/* =========================================
   RESPONSIVE REFINEMENTS
   Layout remains controlled by base.css
   ========================================= */

@media screen and (max-width: 52.99em) {
    .frame__title-main {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .wedding-kicker {
        font-size: 0.56rem;
        letter-spacing: 0.13em;
    }

    .wedding-date {
        font-size: 0.72rem;
    }
   
}

@media (max-width: 700px) {
    .frame__credits {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
    }

    .item__meta {
        font-size: 0.6rem;
    }

    .item__title {
        line-height: 1.2;
    }

    .item__desc {
        font-size: 0.9rem;
        line-height: 1.8;
    }

    .item__link {
        font-size: 0.7rem;
    }

    .preview__column p {
        font-size: 0.9rem;
        line-height: 1.8;
    }
}

/* =========================================
   ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {
    .item__img-inner,
    .item__link,
    .preview__back {
        transition: none;
    }
}

/* =========================================
   REDUCE EMPTY SPACE BELOW THE CARDS
   ========================================= */


/* =========================================
   FIX: REMOVE EXCESS SPACE BELOW THE CARDS
   ========================================= */

main {
    min-height: auto;
    grid-template-rows: min-content auto;
    align-content: start;
    row-gap: 3rem;
    padding-bottom: 1.5rem;
}

.content {
    grid-template-rows: auto;
    margin-bottom: 0;
}

/* Desktop */
@media screen and (min-width: 53em) {
    main {
        row-gap: 3rem;
    }

    .content {
        grid-template-rows: auto;
    }
}

/* Mobile */
@media screen and (max-width: 52.99em) {
    main {
        row-gap: 2rem;
        padding-bottom: 1.5rem;
    }
}

/* =========================================
   FIX: NATURAL PAGE HEIGHT
   ========================================= */

main {
    min-height: 0;
    grid-template-rows: auto auto;
    align-content: start;
    row-gap: 2rem;
    padding-bottom: 1.5rem;
}

.content {
    min-height: 0;
    grid-template-rows: auto;
    align-content: start;
    margin-bottom: 0;
}

@media screen and (min-width: 53em) {
    main {
        row-gap: 2.5rem;
    }

    .content {
        grid-template-rows: auto;
    }
}

@media screen and (max-width: 52.99em) {
    main {
        row-gap: 2rem;
        padding-bottom: 1.5rem;
    }
}

/* =========================================
   WEDDING CONTACT FOOTER
   Maria & Nikos
   ========================================= */

.wedding-footer {
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem 1.5rem 1.75rem;
    text-align: center;
    background: var(--wedding-bg, #f5f0e7);
    color: var(--wedding-ink, #35352e);
}

.wedding-footer__line {
    width: min(100%, 1100px);
    height: 1px;
    margin: 0 auto 1.5rem;
    background: var(--wedding-line, #dcd3c5);
}

.wedding-footer__eyebrow {
    margin: 0 0 0.6rem;
    color: var(--wedding-olive, #59634b);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
}

.wedding-footer__title {
    margin: 0 auto 0.8rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    line-height: 1.2;
    font-weight: 400;
    color: var(--wedding-ink, #35352e);
}

.wedding-footer__text {
    max-width: 540px;
    margin: 0 auto 1.25rem;
    color: var(--wedding-muted, #817b70);
    font-size: 0.9rem;
    line-height: 1.8;
}

.wedding-footer__contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.75rem 1.2rem;
    border: 1px solid var(--wedding-olive, #59634b);
    color: var(--wedding-olive, #59634b);
    text-decoration: none;
    font-size: 0.85rem;
    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.wedding-footer__contact:hover,
.wedding-footer__contact:focus-visible {
    background: var(--wedding-olive, #59634b);
    color: #fffdf8;
}

.wedding-footer__contact:focus-visible,
.wedding-footer__signature a:focus-visible {
    outline: 2px solid var(--wedding-olive, #59634b);
    outline-offset: 4px;
}

.wedding-footer__signature {
    margin: 1.5rem 0 0;
    color: var(--wedding-muted, #817b70);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.wedding-footer__signature a {
    color: var(--wedding-olive, #59634b);
    text-decoration: none;
    border-bottom: 1px solid var(--wedding-line, #dcd3c5);
}

.wedding-footer__signature a:hover {
    border-bottom-color: var(--wedding-olive, #59634b);
}

@media screen and (max-width: 35em) {
    .wedding-footer {
        padding: 1.25rem 1rem 1.5rem;
    }

    .wedding-footer__text {
        max-width: 32rem;
        font-size: 0.84rem;
    }

    .wedding-footer__contact {
        max-width: 100%;
    }

    .wedding-footer__signature {
        line-height: 1.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wedding-footer__contact {
        transition: none;
    }
}

/* Hide the contact footer while a preview is open */
body.preview-visible .wedding-footer {
    visibility: hidden;
    pointer-events: none;
}

/* Fix preview image height on mobile */
@media screen and (max-width: 52.99em) {
    .preview__img {
        height: 45vh;
        min-height: 45vh;
    }

    .preview__img-inner {
        height: 100%;
        min-height: 100%;
    }
}


/*
  Intentionally do not override:
  - .overlay transforms or opacity
  - .preview transforms or opacity
  - GSAP animation properties
  - card layout and grid dimensions

  These remain controlled by the original
  Codrops CSS and JavaScript.
*/

/* =========================================
   WEDDING EDITORIAL
   Maria & Nikos
   Visual overrides for the Codrops template
   ========================================= */

:root {
    --wedding-bg: #f5f0e7;
    --wedding-paper: #fbf9f4;
    --wedding-olive: #59634b;
    --wedding-olive-light: #a5aa91;
    --wedding-ink: #35352e;
    --wedding-muted: #817b70;
    --wedding-line: #dcd3c5;
}

/* =========================================
   PAGE AND TYPOGRAPHY
   ========================================= */

html,
body,
main {
    background: var(--wedding-bg);
}

body {
    color: var(--wedding-ink);
    font-family: Georgia, "Times New Roman", serif;
}

.frame {
    color: var(--wedding-olive);
}

.frame__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
}

.frame__title-main {
    margin: 0;
    color: #34382e;
    font-family: "Palatino Linotype", "Book Antiqua",
                 "Noto Serif", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 1.1;
}

.wedding-kicker {
    display: block;
    color: #788066;
    font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.7;
}

.wedding-amp {
    color: #788066;
    font-style: italic;
}

.wedding-date {
    margin: 0.3rem 0 0;
    color: #77766a;
    font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.frame__credits {
    color: var(--wedding-muted);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    line-height: 1.8;
}

/* =========================================
   EDITORIAL CARDS
   Keep layout controlled by base.css
   ========================================= */

.content,
.item {
    color: var(--wedding-ink);
}

.item__meta {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--wedding-olive);
    font-size: 0.62rem;
    letter-spacing: 0.17em;
    line-height: 1.7;
}

.item__title {
    color: var(--wedding-ink);
    font-family: "Palatino Linotype", "Book Antiqua",
                 Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 1.15;
}

.item__desc {
    max-width: 32rem;
    color: var(--wedding-muted);
    font-size: 0.92rem;
    line-height: 1.9;
}

.item__img {
    overflow: hidden;
    background-color: #e7ddcc;
}

.item__img-inner {
    background-position: center;
    background-size: cover;
    transition:
        filter 350ms ease;
}

.item:hover .item__img-inner {
    filter: saturate(0.92);
}

/* Understated editorial link */

.item__link {
    display: inline-block;
    margin-top: 0.25rem;
    padding-bottom: 0.4rem;
    color: var(--wedding-olive);
    border-bottom: 1px solid #c9cbb9;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-decoration: none;
    cursor: pointer;
    transition:
        color 250ms ease,
        border-color 250ms ease;
}

.item__link:hover {
    color: #858b70;
    border-color: #858b70;
}

/* =========================================
   EXPANDED PREVIEWS
   Preserve the original Codrops animations
   ========================================= */

.previews {
    color: var(--wedding-ink);
}

.preview {
    background-color: var(--color-bg);
    color: var(--wedding-ink) !important;
}

/* Large heading over the preview image */

.preview .preview__title,
.preview .preview__title .oh__inner {
    color: #fffdf8 !important;
    font-family: "Palatino Linotype", "Book Antiqua",
                 Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.045em;
}

/* Preview text and animated text wrappers */

.preview .oh,
.preview .oh__inner,
.preview .preview__column,
.preview .preview__column p {
    color: #34382e !important;
}

.preview .preview__column {
    line-height: 1.85;
}

.preview .preview__column p {
    line-height: 1.9;
}

/* Information headings */

.preview .preview__column-title {
    color: #34382e !important;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.preview .preview__column-title--main,
.preview .preview__column-title--main .oh__inner {
    color: #59634b !important;
}

/* Back control */

.preview .preview__back {
    color: #34382e !important;
    cursor: pointer;
}

.preview .preview__back svg {
    stroke: currentColor !important;
}

.preview .preview__back:hover {
    color: var(--wedding-olive) !important;
}

.preview .preview__back:hover svg {
    stroke: currentColor !important;
}

/* Preview image */

.preview__img {
    overflow: hidden;
    background: #e7ddcc;
}

.preview__img-inner {
    background-position: center;
    background-size: cover;
}

/* =========================================
   RESPONSIVE REFINEMENTS
   Layout remains controlled by base.css
   ========================================= */

@media screen and (max-width: 52.99em) {
    .frame__title-main {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .wedding-kicker {
        font-size: 0.56rem;
        letter-spacing: 0.13em;
    }

    .wedding-date {
        font-size: 0.72rem;
    }
   
}

@media (max-width: 700px) {
    .frame__credits {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
    }

    .item__meta {
        font-size: 0.6rem;
    }

    .item__title {
        line-height: 1.2;
    }

    .item__desc {
        font-size: 0.9rem;
        line-height: 1.8;
    }

    .item__link {
        font-size: 0.7rem;
    }

    .preview__column p {
        font-size: 0.9rem;
        line-height: 1.8;
    }
}

/* =========================================
   ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {
    .item__img-inner,
    .item__link,
    .preview__back {
        transition: none;
    }
}

/* =========================================
   REDUCE EMPTY SPACE BELOW THE CARDS
   ========================================= */


/* =========================================
   FIX: REMOVE EXCESS SPACE BELOW THE CARDS
   ========================================= */

main {
    min-height: auto;
    grid-template-rows: min-content auto;
    align-content: start;
    row-gap: 3rem;
    padding-bottom: 1.5rem;
}

.content {
    grid-template-rows: auto;
    margin-bottom: 0;
}

/* Desktop */
@media screen and (min-width: 53em) {
    main {
        row-gap: 3rem;
    }

    .content {
        grid-template-rows: auto;
    }
}

/* Mobile */
@media screen and (max-width: 52.99em) {
    main {
        row-gap: 2rem;
        padding-bottom: 1.5rem;
    }
}

/* =========================================
   FIX: NATURAL PAGE HEIGHT
   ========================================= */

main {
    min-height: 0;
    grid-template-rows: auto auto;
    align-content: start;
    row-gap: 2rem;
    padding-bottom: 1.5rem;
}

.content {
    min-height: 0;
    grid-template-rows: auto;
    align-content: start;
    margin-bottom: 0;
}

@media screen and (min-width: 53em) {
    main {
        row-gap: 2.5rem;
    }

    .content {
        grid-template-rows: auto;
    }
}

@media screen and (max-width: 52.99em) {
    main {
        row-gap: 2rem;
        padding-bottom: 1.5rem;
    }
}

/* =========================================
   WEDDING CONTACT FOOTER
   Maria & Nikos
   ========================================= */

.wedding-footer {
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem 1.5rem 1.75rem;
    text-align: center;
    background: var(--wedding-bg, #f5f0e7);
    color: var(--wedding-ink, #35352e);
}

.wedding-footer__line {
    width: min(100%, 1100px);
    height: 1px;
    margin: 0 auto 1.5rem;
    background: var(--wedding-line, #dcd3c5);
}

.wedding-footer__eyebrow {
    margin: 0 0 0.6rem;
    color: var(--wedding-olive, #59634b);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
}

.wedding-footer__title {
    margin: 0 auto 0.8rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    line-height: 1.2;
    font-weight: 400;
    color: var(--wedding-ink, #35352e);
}

.wedding-footer__text {
    max-width: 540px;
    margin: 0 auto 1.25rem;
    color: var(--wedding-muted, #817b70);
    font-size: 0.9rem;
    line-height: 1.8;
}

.wedding-footer__contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.75rem 1.2rem;
    border: 1px solid var(--wedding-olive, #59634b);
    color: var(--wedding-olive, #59634b);
    text-decoration: none;
    font-size: 0.85rem;
    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.wedding-footer__contact:hover,
.wedding-footer__contact:focus-visible {
    background: var(--wedding-olive, #59634b);
    color: #fffdf8;
}

.wedding-footer__contact:focus-visible,
.wedding-footer__signature a:focus-visible {
    outline: 2px solid var(--wedding-olive, #59634b);
    outline-offset: 4px;
}

.wedding-footer__signature {
    margin: 1.5rem 0 0;
    color: var(--wedding-muted, #817b70);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.wedding-footer__signature a {
    color: var(--wedding-olive, #59634b);
    text-decoration: none;
    border-bottom: 1px solid var(--wedding-line, #dcd3c5);
}

.wedding-footer__signature a:hover {
    border-bottom-color: var(--wedding-olive, #59634b);
}

@media screen and (max-width: 35em) {
    .wedding-footer {
        padding: 1.25rem 1rem 1.5rem;
    }

    .wedding-footer__text {
        max-width: 32rem;
        font-size: 0.84rem;
    }

    .wedding-footer__contact {
        max-width: 100%;
    }

    .wedding-footer__signature {
        line-height: 1.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wedding-footer__contact {
        transition: none;
    }
}

/* Hide the contact footer while a preview is open */
body.preview-visible .wedding-footer {
    visibility: hidden;
    pointer-events: none;
}

/* Fix preview image height on mobile */
@media screen and (max-width: 52.99em) {
    .preview__img {
        height: 45vh;
        min-height: 45vh;
    }

    .preview__img-inner {
        height: 100%;
        min-height: 100%;
    }
}


/*
  Intentionally do not override:
  - .overlay transforms or opacity
  - .preview transforms or opacity
  - GSAP animation properties
  - card layout and grid dimensions

  These remain controlled by the original
  Codrops CSS and JavaScript.
*/