/* ==========================================================================
   Christmas page widgets

   Styles for the christmas*.cshtml grid editors, built to match the
   "Christmas at Gara Rock" design (1440px wide). Everything is scoped under
   .xmas so none of it reaches the rest of the site. The file is linked once
   per page by Views/Partials/Christmas/Assets.cshtml, which also loads the
   design's fonts (Cormorant Garamond and Inter) from Google Fonts.

   Section colours come from the "Christmas - Colour" picker. The views write
   the picked hex into data-xmas-bg and the rules below give each swatch its
   background, text and line colours. A hex that is not listed here falls back
   to Stone.
   ========================================================================== */

.xmas {
    --xmas-sage: #687266;
    --xmas-stone: #eee9e4;
    --xmas-slate: #2e3942;
    --xmas-blue-grey: #7c8892;
    --xmas-taupe: #c8c0b3;

    --xmas-bg: var(--xmas-stone);
    --xmas-text: var(--xmas-slate);
    --xmas-rule: rgba(46, 57, 66, 0.5);
    --xmas-divider: var(--xmas-taupe);
    --xmas-btn-bg: var(--xmas-sage);
    --xmas-btn-text: var(--xmas-stone);
    --xmas-panel: var(--xmas-slate);

    --xmas-serif: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
    --xmas-sans: "Inter", Arial, Helvetica, sans-serif;
    --xmas-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0.5 6h10M6.3 1.6 10.7 6l-4.4 4.4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");

    --xmas-gutter: 80px;
    --xmas-space: 104px;
    --xmas-line: 147px;
    /* Distance from the edge of the content to the edge of the window, for images that run off the page */
    --xmas-edge: max(var(--xmas-gutter), calc((100vw - 1280px) / 2));

    position: relative;
    background-color: var(--xmas-bg);
    color: var(--xmas-text);
    font-family: var(--xmas-sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sage, Slate and Blue grey take light text */
.xmas[data-xmas-bg="687266"],
.xmas[data-xmas-bg="2e3942"],
.xmas[data-xmas-bg="7c8892"],
.xmas-hero {
    --xmas-text: var(--xmas-stone);
    --xmas-rule: rgba(238, 233, 228, 0.5);
    --xmas-divider: rgba(238, 233, 228, 0.3);
    --xmas-btn-bg: var(--xmas-stone);
    --xmas-btn-text: var(--xmas-slate);
}

.xmas[data-xmas-bg="687266"] { --xmas-bg: var(--xmas-sage); }

.xmas[data-xmas-bg="2e3942"] { --xmas-bg: var(--xmas-slate); --xmas-panel: var(--xmas-sage); }

.xmas[data-xmas-bg="7c8892"] { --xmas-bg: var(--xmas-blue-grey); }

.xmas[data-xmas-bg="c8c0b3"] { --xmas-bg: var(--xmas-taupe); --xmas-rule: rgba(46, 57, 66, 0.4); --xmas-divider: rgba(46, 57, 66, 0.2); }

/* The design runs the hero straight into the first section, so pages built from
   these widgets drop the breadcrumb strip that GenericPage puts between them */
.main:has(.xmas) > div:first-child:has(.section__breadcrumbs) { display: none; }

/* ------------------------------------------------------------ *\
    Shared pieces
\* ------------------------------------------------------------ */

.xmas-container { box-sizing: border-box; width: 100%; max-width: calc(1280px + 2 * var(--xmas-gutter)); margin: 0 auto; padding: 0 var(--xmas-gutter); }

.xmas a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Small capitals label above a title; --rule adds the short line in front of it */
.xmas .xmas-kicker { margin: 0 0 24px; font-family: var(--xmas-sans); font-size: 14px; font-weight: 300; line-height: 1.4; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; }

/* The short line sits level with the middle of the first line (line-height 1.4), so it stays put when the label wraps */
.xmas .xmas-kicker--rule { display: flex; align-items: flex-start; }

.xmas .xmas-kicker--rule::before { content: ''; flex: 0 0 46px; height: 1px; margin: calc(0.7em - 0.5px) 11px 0 0; background-color: currentColor; }

/* pre-line keeps line breaks typed into a Textarea title, so editors can choose where a title wraps */
.xmas .xmas-title { margin: 0 0 24px; font-family: var(--xmas-serif); font-size: 58px; font-weight: 400; line-height: 1.03; letter-spacing: 0; color: inherit; text-transform: none; white-space: pre-line; }

.xmas .xmas-title--display { font-size: 68px; line-height: 1; text-transform: uppercase; }

/* Editor copy (Rich Text Editor output) */
.xmas .xmas-copy { font-size: 16px; line-height: 1.7; }

.xmas .xmas-copy p,
.xmas .xmas-copy ul,
.xmas .xmas-copy ol { margin: 0 0 27px; }

.xmas .xmas-copy > :last-child { margin-bottom: 0; }

.xmas .xmas-copy ul,
.xmas .xmas-copy ol { padding-left: 1.2em; }

.xmas .xmas-copy li { list-style-position: outside; }

.xmas .xmas-copy strong,
.xmas .xmas-copy b { font-weight: 500; }

.xmas .xmas-copy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.xmas .xmas-copy .xmas-plain { white-space: pre-line; }

/* "EXPLORE ... ->" text link. Used for picked links and for any paragraph in the
   copy that holds nothing but a link (Christmas/RichText.cshtml tags those). */
.xmas .xmas-copy .xmas-link-row { margin: 32px 0; }

.xmas .xmas-copy .xmas-link-row:last-child { margin-bottom: 0; }

.xmas .xmas-link,
.xmas .xmas-copy .xmas-link-row > a { display: inline-flex; align-items: center; padding: 0 2px 6px 0; border-bottom: 1px solid var(--xmas-rule); color: inherit; font-family: var(--xmas-sans); font-size: 13px; font-weight: 300; line-height: 1.4; letter-spacing: 0; text-decoration: none; text-transform: uppercase; transition: border-color 0.3s ease; }

.xmas .xmas-link::after,
.xmas .xmas-copy .xmas-link-row > a::after,
.xmas .xmas-btn::after { content: ''; flex: 0 0 auto; width: 11px; height: 11px; margin-left: 12px; background-color: currentColor; -webkit-mask: var(--xmas-arrow) center / contain no-repeat; mask: var(--xmas-arrow) center / contain no-repeat; transition: transform 0.3s ease; }

.xmas .xmas-links { display: flex; flex-direction: column; align-items: flex-start; margin: 32px 0 0; padding: 0; list-style: none; }

.xmas .xmas-links li { margin: 0 0 24px; list-style: none; }

.xmas .xmas-links li:last-child { margin-bottom: 0; }

.xmas .xmas-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 4px; background-color: var(--xmas-btn-bg); color: var(--xmas-btn-text); font-family: var(--xmas-sans); font-size: 13px; font-weight: 300; line-height: 1.4; letter-spacing: 0; text-align: center; text-decoration: none; text-transform: uppercase; transition: opacity 0.3s ease; }

.xmas .xmas-btn::after { margin-left: 14px; }

@media (hover) {
    .xmas .xmas-link:hover,
    .xmas .xmas-copy .xmas-link-row > a:hover { border-bottom-color: currentColor; color: inherit; }

    .xmas .xmas-link:hover::after,
    .xmas .xmas-copy .xmas-link-row > a:hover::after,
    .xmas .xmas-btn:hover::after { transform: translateX(3px); }

    .xmas .xmas-btn:hover { opacity: 0.88; color: var(--xmas-btn-text); }
}

/* Caption under an image, with a short line in front */
.xmas .xmas-caption { display: flex; align-items: flex-start; margin: 14px 0 0; font-size: 14px; line-height: 1.4; text-transform: uppercase; text-wrap: balance; }

.xmas .xmas-caption::before { content: ''; flex: 0 0 20px; height: 1px; margin: calc(0.7em - 0.5px) 8px 0 0; background-color: currentColor; opacity: 0.75; }

/* ------------------------------------------------------------ *\
    Hero (christmasHero)
\* ------------------------------------------------------------ */

.xmas-hero { display: flex; align-items: center; justify-content: center; height: 100vh; min-height: 560px; max-height: 1000px; overflow: hidden; background-color: var(--xmas-slate); text-align: center; }

.xmas-hero .xmas-hero__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

/* Takes the edge off bright photos so the white title stays readable */
.xmas-hero::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(20, 22, 18, 0.22); }

.xmas-hero .xmas-hero__content { position: relative; z-index: 1; padding: 0 var(--xmas-gutter) 20px; }

.xmas-hero .xmas-kicker { margin-bottom: 18px; }

.xmas-hero .xmas-title { margin: 0; }

/* Backoffice grid preview */
.xmas-hero--preview { height: 420px; min-height: 0; }

/* ------------------------------------------------------------ *\
    Intro (christmasIntro) - centred title and copy, with optional
    vertical lines above and below. The lines stop short of the
    section edges (38px above, 28px below, as in the design) unless
    --lines-to-edge is set, which runs them right to the edge.
\* ------------------------------------------------------------ */

.xmas-intro { --xmas-line-gap-top: 38px; --xmas-line-gap-bottom: 28px; padding: var(--xmas-space) 0 48px; text-align: center; }

.xmas-intro--lines-to-edge { --xmas-line-gap-top: 0px; --xmas-line-gap-bottom: 0px; }

.xmas-intro--line-top { padding-top: calc(var(--xmas-line-gap-top) + var(--xmas-line) + 38px); }

.xmas-intro--line-bottom { padding-bottom: calc(var(--xmas-line) + 38px + var(--xmas-line-gap-bottom)); }

.xmas-intro--line-top::before,
.xmas-intro--line-bottom::after { content: ''; position: absolute; left: 50%; width: 1px; height: var(--xmas-line); background-color: currentColor; }

.xmas-intro--line-top::before { top: var(--xmas-line-gap-top); }

.xmas-intro--line-bottom::after { bottom: var(--xmas-line-gap-bottom); }

.xmas-intro .xmas-kicker { margin-bottom: 12px; }

.xmas-intro .xmas-title { max-width: 1000px; margin: 0 auto 14px; }

.xmas-intro .xmas-copy { max-width: 816px; margin: 0 auto; }

.xmas-intro .xmas-intro__action { margin: 40px 0 0; }

/* ------------------------------------------------------------ *\
    Text and image (christmasTextImage)
    --inset  image sits inside the page margins (default)
    --full   image fills its half of the section, edge to edge
    --bleed  image runs off the side of the page, caption below
\* ------------------------------------------------------------ */

.xmas-split { padding: var(--xmas-space) 0; overflow: hidden; }

.xmas-split .xmas-split__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 80px; align-items: center; }

.xmas-split--image-left .xmas-split__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }

.xmas-split--image-left .xmas-split__media { order: -1; }

.xmas-split .xmas-split__text { max-width: 530px; }

.xmas-split .xmas-split__media { position: relative; margin: 0; }

.xmas-split .xmas-split__image { display: block; width: 100%; height: auto; max-width: none; max-height: none; border-radius: 4px; }

/* Inset photos are cropped to the design's shapes: 5:4 landscape, or square for "Inset square".
   The view also asks the server for that shape, so this only trims a pixel or two. */
.xmas-split--inset .xmas-split__image { aspect-ratio: 5 / 4; object-fit: cover; }

.xmas-split--square .xmas-split__image { aspect-ratio: 1 / 1; }

/* Full height */

.xmas-split--full { padding: 0; }

.xmas-split--full .xmas-split__grid { max-width: none; padding: 0; grid-template-columns: minmax(0, 1fr) calc(50% + 40px); column-gap: 0; align-items: stretch; }

.xmas-split--full.xmas-split--image-left .xmas-split__grid { grid-template-columns: calc(50% + 40px) minmax(0, 1fr); }

.xmas-split--full .xmas-split__text { justify-self: end; box-sizing: border-box; width: 100%; max-width: 688px; padding: 96px 72px 112px var(--xmas-gutter); }

.xmas-split--full.xmas-split--image-left .xmas-split__text { justify-self: start; padding: 96px 72px 112px; }

.xmas-split--full .xmas-split__media { min-height: 560px; }

.xmas-split--full .xmas-split__image { position: absolute; top: 0; left: 0; height: 100%; object-fit: cover; border-radius: 0; }

.xmas-split--full .xmas-caption { position: absolute; left: 24px; right: 24px; bottom: 20px; margin: 0; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }

/* Bleed */

.xmas-split--bleed .xmas-split__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

.xmas-split--bleed.xmas-split--image-left .xmas-split__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

.xmas-split--bleed .xmas-split__media { margin-right: calc(-1 * var(--xmas-edge)); }

.xmas-split--bleed.xmas-split--image-left .xmas-split__media { margin-right: 0; margin-left: calc(-1 * var(--xmas-edge)); }

.xmas-split--bleed .xmas-split__image { aspect-ratio: 796 / 641; object-fit: cover; border-radius: 0; }

/* The photo runs off the page but its caption stops at the content edge */
.xmas-split--bleed .xmas-caption { margin-right: var(--xmas-edge); }

.xmas-split--bleed.xmas-split--image-left .xmas-caption { margin-right: 0; margin-left: var(--xmas-edge); }

/* No image picked: let the text have the row */
.xmas-split.xmas-split--no-image .xmas-split__grid { grid-template-columns: minmax(0, 1fr); }

/* Backoffice grid preview: the preview pane is narrower than the window, so keep bled images inside it */
.xmas--preview { --xmas-edge: 0px; }

/* ------------------------------------------------------------ *\
    Image gallery (christmasGallery) - one large image and two
    stacked, over a background that changes colour part way down
\* ------------------------------------------------------------ */

.xmas-gallery { --xmas-gallery-split: 140px; padding: 24px 0; background: linear-gradient(to bottom, var(--xmas-gallery-top, var(--xmas-bg)) calc(24px + var(--xmas-gallery-split)), var(--xmas-bg) calc(24px + var(--xmas-gallery-split))); }

.xmas-gallery .xmas-gallery__grid { display: grid; grid-template-columns: minmax(0, 19fr) minmax(0, 12fr); grid-template-rows: 1fr 1fr; gap: 24px 40px; }

.xmas-gallery .xmas-gallery__item { position: relative; margin: 0; overflow: hidden; border-radius: 4px; }

.xmas-gallery .xmas-gallery__item:first-child { grid-row: span 2; aspect-ratio: 760 / 703; }

.xmas-gallery .xmas-gallery__item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

.xmas-gallery--1 .xmas-gallery__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }

.xmas-gallery--1 .xmas-gallery__item:first-child { grid-row: auto; aspect-ratio: 16 / 9; }

.xmas-gallery--2 .xmas-gallery__item:nth-child(2) { grid-row: span 2; }

/* ------------------------------------------------------------ *\
    FAQs (christmasFaqs)
\* ------------------------------------------------------------ */

.xmas-faqs { padding: var(--xmas-space) 0 40px; }

.xmas-faqs .xmas-faqs__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: 80px; align-items: start; }

.xmas-faqs .xmas-kicker { margin-bottom: 20px; }

.xmas-faqs .xmas-title { margin: 0; }

.xmas-faqs .xmas-faqs__list { border-top: 1px solid var(--xmas-divider); }

.xmas-faqs .xmas-faqs__item { padding: 27px 0 29px; border-bottom: 1px solid var(--xmas-divider); }

.xmas-faqs .xmas-faqs__question { margin: 0 0 15px; font-family: var(--xmas-serif); font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: 0; color: inherit; text-transform: none; }

.xmas-faqs .xmas-copy p { margin-bottom: 20px; }

.xmas-faqs .xmas-copy .xmas-link-row { margin: 20px 0; }

.xmas-faqs .xmas-copy > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ *\
    Call to action (christmasCallToAction)
\* ------------------------------------------------------------ */

.xmas-cta { padding: 40px 0 96px; }

.xmas-cta .xmas-cta__box { --xmas-btn-bg: var(--xmas-stone); --xmas-btn-text: var(--xmas-slate); display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 40px 48px; border-radius: 4px; background-color: var(--xmas-panel); color: var(--xmas-stone); }

.xmas-cta .xmas-cta__text { margin-right: 48px; }

.xmas-cta .xmas-cta__title { margin: 0; font-family: var(--xmas-serif); font-size: 34px; font-weight: 400; line-height: 1.2; letter-spacing: 0; color: inherit; text-transform: none; }

.xmas-cta .xmas-cta__subtitle { margin: 11px 0 0; font-size: 15px; line-height: 1.6; }

.xmas-cta .xmas-btn { flex: 0 0 auto; }

/* ------------------------------------------------------------ *\
    Smaller screens
\* ------------------------------------------------------------ */

@media (max-width: 1199px) {
    .xmas { --xmas-gutter: 48px; --xmas-space: 88px; }

    .xmas .xmas-title { font-size: 50px; }

    .xmas .xmas-title--display { font-size: 58px; }

    .xmas-split .xmas-split__grid,
    .xmas-faqs .xmas-faqs__grid { column-gap: 56px; }

    .xmas-split--full .xmas-split__text,
    .xmas-split--full.xmas-split--image-left .xmas-split__text { padding: 80px 48px 88px; }
}

@media (max-width: 991px) {
    .xmas { --xmas-space: 72px; --xmas-line: 112px; }

    .xmas .xmas-title { font-size: 44px; }

    .xmas .xmas-title--display { font-size: 48px; }

    /* Text and image stack, image first */
    .xmas-split .xmas-split__grid,
    .xmas-split--image-left .xmas-split__grid,
    .xmas-split--bleed .xmas-split__grid,
    .xmas-split--bleed.xmas-split--image-left .xmas-split__grid,
    .xmas-split--full .xmas-split__grid,
    .xmas-split--full.xmas-split--image-left .xmas-split__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }

    .xmas-split .xmas-split__media { order: -1; }

    .xmas-split .xmas-split__text { max-width: 640px; }

    .xmas-split--bleed .xmas-split__media,
    .xmas-split--bleed.xmas-split--image-left .xmas-split__media { margin-right: calc(-1 * var(--xmas-gutter)); margin-left: calc(-1 * var(--xmas-gutter)); }

    .xmas-split--bleed .xmas-caption,
    .xmas-split--bleed.xmas-split--image-left .xmas-caption { margin-right: var(--xmas-gutter); margin-left: var(--xmas-gutter); }

    .xmas-split--full .xmas-split__grid { row-gap: 0; }

    .xmas-split--full .xmas-split__media { min-height: 0; aspect-ratio: 4 / 3; }

    .xmas-split--full .xmas-split__text,
    .xmas-split--full.xmas-split--image-left .xmas-split__text { justify-self: stretch; max-width: none; padding: 64px var(--xmas-gutter) 72px; }

    .xmas-gallery { --xmas-gallery-split: 80px; }

    .xmas-gallery .xmas-gallery__grid { gap: 16px 24px; }

    .xmas-faqs .xmas-faqs__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }

    .xmas-cta .xmas-cta__box { flex-direction: column; align-items: flex-start; padding: 36px 40px; }

    .xmas-cta .xmas-cta__text { margin: 0 0 28px; }
}

@media (max-width: 767px) {
    .xmas { --xmas-gutter: 24px; --xmas-space: 64px; --xmas-line: 80px; }

    .xmas .xmas-title { font-size: 38px; line-height: 1.05; }

    .xmas .xmas-title--display { font-size: 40px; line-height: 1.05; }

    .xmas .xmas-kicker--rule::before { flex-basis: 32px; }

    .xmas .xmas-caption { font-size: 12px; }

    .xmas .xmas-caption::before { display: none; }

    .xmas-hero { height: 85vh; min-height: 480px; }

    .xmas-intro { --xmas-line-gap-top: 24px; --xmas-line-gap-bottom: 18px; }

    .xmas-intro--lines-to-edge { --xmas-line-gap-top: 0px; --xmas-line-gap-bottom: 0px; }

    .xmas-intro--line-top { padding-top: calc(var(--xmas-line-gap-top) + var(--xmas-line) + 28px); }

    .xmas-intro--line-bottom { padding-bottom: calc(var(--xmas-line) + 28px + var(--xmas-line-gap-bottom)); }

    .xmas-split--full .xmas-split__text,
    .xmas-split--full.xmas-split--image-left .xmas-split__text { padding: 48px var(--xmas-gutter) 56px; }

    .xmas-gallery { --xmas-gallery-split: 56px; }

    .xmas-gallery .xmas-gallery__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; gap: 12px; }

    .xmas-gallery .xmas-gallery__item { aspect-ratio: 1 / 1; }

    .xmas-gallery .xmas-gallery__item:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }

    .xmas-gallery--2 .xmas-gallery__item:nth-child(2) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }

    .xmas-faqs .xmas-faqs__question { font-size: 24px; }

    .xmas-cta .xmas-cta__box { padding: 32px 24px; }

    .xmas-cta .xmas-cta__title { font-size: 28px; }
}