/*
   =========================================================
   ZOOM PHOTO STUDIO - HOME-CHRISTMAS.CSS v1.1

   Christmas homepage promotional section.

   COLOUR SWITCH:
   Default is GREEN.

   To switch to RED:
   Comment out the GREEN block
   and uncomment the RED block.
   =========================================================
*/

/*
   =========================================================
   CHRISTMAS COLOUR THEME - GREEN
   =========================================================
*/

.home_christmas {
    --christmas-bg: #082f25;
    --christmas-bg-deep: #06271f;
    --christmas-bg-soft: #0d3a2e;
    --christmas-accent: #c28f52;
    --christmas-accent-light: #ddb77e;
    --christmas-text: #f8f1e7;
    --christmas-text-soft: rgba( 248, 241, 231, 0.82 );
    --christmas-line: rgba( 194, 143, 82, 0.55 );
}

/*
   =========================================================
   CHRISTMAS COLOUR THEME - RED

   TO USE RED:
   1. Comment out the GREEN block above.
   2. Uncomment this block.

   =========================================================
*/

/*
   .home_christmas {
   --christmas-bg:
   #5b1818;

   --christmas-bg-deep:
   #451010;

   --christmas-bg-soft:
   #6d2020;

   --christmas-accent:
   #c28f52;

   --christmas-accent-light:
   #ddb77e;

   --christmas-text:
   #f8f1e7;

   --christmas-text-soft:
   rgba(
   248,
   241,
   231,
   0.82
   );

   --christmas-line:
   rgba(
   194,
   143,
   82,
   0.55
   );
}
*/

/*
   =========================================================
   SECTION
   =========================================================
*/

.home_christmas {
    width: 100%;
    background: var(--christmas-bg);
    color: var(--christmas-text);
    border-top: 1px solid var(--christmas-line);
    border-bottom: 1px solid var(--christmas-line);
}

/*
   =========================================================
   HERO LAYOUT
   =========================================================
*/

.home_christmas_hero {
    display: grid;
    grid-template-columns: minmax( 420px, 0.95fr ) minmax( 0, 1.6fr );
    min-height: 450px;
    background: var(--christmas-bg);
}

/*
   =========================================================
   COPY PANEL
   =========================================================
*/

.home_christmas_content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp( 34px, 4vw, 54px ) clamp( 34px, 5vw, 80px );
    text-align: center;
    background: radial-gradient( circle at 50% 30%, rgba( 255, 255, 255, 0.045 ), transparent 46% ), linear-gradient( 180deg, var(--christmas-bg-soft), var(--christmas-bg-deep) );
}

/*
   =========================================================
   EYEBROW
   =========================================================
*/

.home_christmas_eyebrow {
    margin: 0;
    color: var(--christmas-accent-light);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    line-height: 1.4;
    text-transform: uppercase;
}

/*
   =========================================================
   MAIN HEADING
   =========================================================
*/

.home_christmas h2 {
    margin: 16px 0 0;
    color: var(--christmas-text);
    font-family: var(--zoom-serif);
    font-size: clamp( 3.25rem, 5vw, 5.125rem );
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 0.94;
    text-transform: uppercase;
}

/*
   =========================================================
   YEAR
   =========================================================
*/

.home_christmas_year {
    margin: 10px 0 0;
    color: var(--christmas-accent-light);
    font-family: var(--zoom-serif);
    font-size: clamp( 2.5rem, 4vw, 3.625rem );
    font-style: italic;
    font-weight: 400;
    line-height: 1;
}

/*
   =========================================================
   DECORATIVE DIVIDER
   =========================================================
*/

.home_christmas_divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    width: min( 100%, 360px );
    margin: 18px 0;
}

.home_christmas_divider > span:not(.home_christmas_star) {
    height: 1px;
    background: var(--christmas-line);
}

.home_christmas_star {
    color: var(--christmas-accent-light);
    font-size: 1.375rem;
    line-height: 1;
}

/*
   =========================================================
   INTRO
   =========================================================
*/

.home_christmas_intro {
    margin: 0;
    color: var(--christmas-text);
    font-family: var(--zoom-serif);
    font-size: clamp( 1.5625rem, 2vw, 2.125rem );
    font-weight: 400;
    line-height: 1.2;
}

/*
   =========================================================
   BODY COPY
   =========================================================
*/

.home_christmas_text {
    max-width: 410px;
    margin: 14px auto 0;
    color: var(--christmas-text-soft);
    font-size: var(--zoom-body-size);
    line-height: 1.8;
}

/*
   =========================================================
   BUTTON AREA
   =========================================================
*/

.home_christmas_actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    width: 100%;
    margin-top: 22px;
}

.home_christmas_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 25px;
    border: 1px solid var(--christmas-accent);
    font-family: var(--zoom-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.home_christmas_button_primary {
    background: var(--christmas-accent);
    color: #ffffff;
}

.home_christmas_button_primary:hover, .home_christmas_button_primary:focus-visible {
    background: var(--christmas-accent-light);
    border-color: var(--christmas-accent-light);
    color: var(--christmas-bg-deep);
}

.home_christmas_button_outline {
    background: transparent;
    color: var(--christmas-text);
}

.home_christmas_button_outline:hover, .home_christmas_button_outline:focus-visible {
    background: var(--christmas-accent);
    color: #ffffff;
}

/*
   =========================================================
   LIMITED DATES
   =========================================================
*/

.home_christmas_dates {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
    color: var(--christmas-text-soft);
    text-align: left;
}

.home_christmas_calendar {
    color: var(--christmas-accent-light);
    font-size: 1.6875rem;
}

.home_christmas_dates strong, .home_christmas_dates span {
    display: block;
}

.home_christmas_dates strong {
    color: var(--christmas-text);
    font-size: var(--zoom-body-size);
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-transform: uppercase;
}

.home_christmas_dates div > span {
    margin-top: 3px;
    color: var(--christmas-text-soft);
    font-size: var(--zoom-body-size);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/*
   =========================================================
   IMAGE
   =========================================================
*/

.home_christmas_image_wrap {
    position: relative;
    min-height: 450px;
    overflow: hidden;
    background: var(--christmas-bg-deep);
}

.home_christmas_image_wrap::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: 14%;
    background: linear-gradient( 90deg, var(--christmas-bg-deep), transparent );
    pointer-events: none;
}

.home_christmas_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/*
   =========================================================
   INCLUDED AREA
   =========================================================
*/

.home_christmas_included {
    padding: 16px 0 18px;
    background: linear-gradient( 180deg, var(--christmas-bg), var(--christmas-bg-deep) );
    border-top: 1px solid var(--christmas-line);
}

.home_christmas_included_title {
    margin: 0 0 14px;
    color: var(--christmas-accent-light);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-align: center;
    text-transform: uppercase;
}

/*
   =========================================================
   INCLUDED GRID
   =========================================================
*/

.home_christmas_included_grid {
    display: grid;
    grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
    align-items: stretch;
}

.home_christmas_included_grid article {
    position: relative;
    min-width: 0;
    padding: 0 10px;
    text-align: center;
}

.home_christmas_included_grid article:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10%;
    right: 0;
    bottom: 10%;
    width: 1px;
    background: var(--christmas-line);
}

.home_christmas_include_icon {
    display: block;
    min-height: 28px;
    margin-bottom: 6px;
    color: var(--christmas-accent-light);
    font-size: 1.5rem;
    line-height: 1;
}

.home_christmas_included_grid p {
    margin: 0;
    color: var(--christmas-text);
    font-size: var(--zoom-body-size);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.45;
    text-transform: uppercase;
}

/*
   =========================================================
   BOTTOM CTA
   =========================================================
*/

.home_christmas_bottom_actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 26px;
}

.home_christmas_text_link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--christmas-accent-light);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

.home_christmas_text_link span {
    transition: transform 0.2s ease;
}

.home_christmas_text_link:hover span {
    transform: translateX(4px);
}

/*
   =========================================================
   TABLET
   =========================================================
*/

@media (max-width: 1000px) {

    .home_christmas_hero {
        grid-template-columns: 1fr;
}

    .home_christmas_content {
        order: 2;
        padding: 38px var(--zoom-pad) 42px;
}

    .home_christmas_image_wrap {
        min-height: 48vw;
        max-height: 500px;
}

    .home_christmas_image_wrap::before {
        display: none;
}

    .home_christmas_included_grid {
        grid-template-columns: repeat( 4, 1fr );
        row-gap: 28px;
}

    .home_christmas_included_grid article:nth-child(4)::after {
        display: none;
}

}

/*
   =========================================================
   MOBILE
   =========================================================
*/

@media (max-width: 680px) {

    .home_christmas_image_wrap {
        min-height: 64vw;
}

    .home_christmas h2 {
        font-size: clamp( 2.875rem, 13vw, 4rem );
}

    .home_christmas_year {
        font-size: 2.625rem;
}

    .home_christmas_intro {
        font-size: 1.6875rem;
}

    .home_christmas_text {
        font-size: var(--zoom-body-size);
}

    .home_christmas_actions {
        flex-direction: column;
}

    .home_christmas_actions .home_christmas_button {
        width: 100%;
}

    .home_christmas_dates {
        align-items: flex-start;
}

    .home_christmas_included {
        padding: 20px 0 24px;
}

    .home_christmas_included_grid {
        grid-template-columns: repeat( 2, 1fr );
        gap: 28px 0;
}

    .home_christmas_included_grid article::after {
        display: none;
}

    .home_christmas_included_grid article:nth-child(odd) {
        border-right: 1px solid var(--christmas-line);
}

    .home_christmas_included_grid article:last-child {
        grid-column: 1 / -1;
        border-right: 0;
}

    .home_christmas_included_grid p {
        font-size: var(--zoom-body-size);
}

    .home_christmas_bottom_actions {
        flex-direction: column;
        gap: 18px;
}

    .home_christmas_bottom_actions .home_christmas_button {
        width: 100%;
}

}

/*
   =========================================================
   SMALL MOBILE
   =========================================================
*/

@media (max-width: 420px) {

    .home_christmas_content {
        padding-right: 22px;
        padding-left: 22px;
}

    .home_christmas_eyebrow {
        font-size: 0.625rem;
}

    .home_christmas h2 {
        font-size: 2.6875rem;
}

    .home_christmas_text {
        line-height: 1.7;
}

    .home_christmas_dates strong, .home_christmas_dates div > span {
        font-size: var(--zoom-body-size);
}

}