/* Cathy Teesdale website: styles for what the CMS adds on top of the prototype's site.css
   (dark margin toggles, carousels, full-screen photos, light carousel, link colours, dividers). */

/* ================= Dark margin strips (Figma: Top / Bottom / Side margins dark) =================
   The prototype's fixed versions are switched off so the CMS toggles decide. */
.four--dark, .split--dark { border: 0; }
.land { border-left: 0; border-right: 0; }
.m-top { border-top: 30px solid var(--dark); }
.m-bottom { border-bottom: 30px solid var(--dark); }
.m-sides { border-left: 30px solid var(--dark); border-right: 30px solid var(--dark); }
@media (max-width: 700px) { .m-sides { border-left-width: 20px; border-right-width: 20px; } }

/* ================= Dots (hero, carousel, galleries): buttons when there is more to see ================= */
.dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid currentColor; background: transparent; cursor: pointer; transition: transform .15s; }
.dots button:hover { transform: scale(1.25); }
.dots button[aria-current="true"] { background: currentColor; }
.dots__spacer { display: block; height: 10px; }
.hero__dots { color: var(--teal); }
.gallery-dots { color: var(--teal); }
.carousel-block__dots { color: #2DB2C4; }

/* ================= Hero carousel and image carousel: photos fade into each other ================= */
.hero__image, .carousel-block__image { position: relative; overflow: hidden; }
.hero__slide, .carousel-block__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.hero__slide.is-active, .carousel-block__slide.is-active { opacity: 1; z-index: 1; }
.hero__slide img, .carousel-block__slide img, .carousel-block__slide .img-link, .carousel-block__slide .zoom { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero__slide, .carousel-block__slide { transition: none; } }

/* ================= Image carousel on a light background ================= */
.carousel-block--light { background: var(--panel); color: var(--ink); }
.carousel-block--light h1, .carousel-block--light h2 { color: var(--ink); }
.carousel-block--light .carousel-block__dots, .carousel-block--light .flip__count { color: var(--teal); }
.carousel-block--light .flip__arrow { color: var(--ink); }
.carousel-block--light .flip__dots button { border-color: var(--teal); }
.carousel-block--light .flip__dots button[aria-current="true"] { background: var(--teal); }
.carousel-block h1 { font-weight: 200; font-size: var(--h-top); margin: 0 0 45px; color: var(--off-white); }
.carousel-block--light h1 { color: var(--ink); }
.carousel-block__video { margin-top: 76px; }
@media (max-width: 1024px) { .carousel-block__video { margin-top: 56px; } }
@media (max-width: 700px) { .carousel-block__video { margin-top: 32px; } }

/* ================= 4 and 5 photo galleries with more photos than fit: the row scrolls with the dots ================= */
.gallery--scroll .four__grid, .gallery--scroll .five__grid {
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; flex-wrap: nowrap;
}
.gallery--scroll .four__grid::-webkit-scrollbar, .gallery--scroll .five__grid::-webkit-scrollbar { display: none; }
.gallery--scroll .four__grid > * { flex: 0 0 calc((100% - 3 * 22px) / 4); scroll-snap-align: start; }
.gallery--scroll .five__grid > * { flex: 0 0 calc((100% - 4 * 33px) / 5); scroll-snap-align: start; }
@media (max-width: 1024px) { .gallery--scroll .five__grid > * { flex-basis: calc((100% - 4 * 22px) / 5); } }
@media (max-width: 700px) {
  /* phones: 2 x 2 photos at a time for 4 images, 3 across for the portrait gallery */
  .gallery--scroll .four__grid { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: calc(50% - 6px); gap: 12px; }
  .gallery--scroll .five__grid > *, .gallery--scroll .five__grid > :nth-child(4), .gallery--scroll .five__grid > :nth-child(5) { flex: 0 0 calc((100% - 2 * 12px) / 3); }
}

/* ================= Full-screen photos ================= */
.zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom img { width: 100%; height: 100%; object-fit: cover; }
.four__grid .zoom img { aspect-ratio: 3 / 2; }
.five__grid .zoom img { aspect-ratio: 2 / 3; }
.lightbox { position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(20, 26, 26, .96); color: var(--off-white); }
.lightbox::backdrop { background: rgba(20, 26, 26, .96); }
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox__figure { margin: 0; padding: 70px 80px 24px; flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox__figure img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; }
.lightbox__figure figcaption { margin-top: 18px; font-weight: 200; font-size: var(--body); line-height: 1.5; text-align: center; max-width: 900px; color: var(--light-text); }
.lightbox__close, .lightbox__nav { position: absolute; background: none; border: 0; color: var(--off-white); cursor: pointer; opacity: .8; padding: 10px; }
.lightbox__close:hover, .lightbox__nav:hover { opacity: 1; }
.lightbox__close { top: 16px; right: 20px; width: 48px; height: 48px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 60px; }
.lightbox__nav--prev { left: 14px; } .lightbox__nav--next { right: 14px; }
.lightbox__nav[hidden] { display: none; }
@media (max-width: 700px) { .lightbox__figure { padding: 70px 16px 70px; } .lightbox__nav { top: auto; bottom: 14px; transform: none; } }

/* ================= Links inside text: teal on light grey, aqua on dark ================= */
.welcome__body a, .gallery-row__text a, .split__text a, .land__text a, .full-para a, .news p a, .article-text a, .legal__text a,
.contact__intro a, .carousel-block--light p a { color: var(--teal); text-decoration: none; }
.carousel-block:not(.carousel-block--light) p a { color: #2DB2C4; text-decoration: none; }
.welcome__body a:hover, .gallery-row__text a:hover, .split__text a:hover, .land__text a:hover, .full-para a:hover, .news p a:hover,
.article-text a:hover, .legal__text a:hover, .contact__intro a:hover, .carousel-block p a:hover,
.welcome__body a:focus-visible, .gallery-row__text a:focus-visible, .split__text a:focus-visible, .article-text a:focus-visible { text-decoration: underline; }

/* ================= Divider lines the CMS can switch on (spacing as the prototype's 2026-10-21 rules) ================= */
.welcome__inner > .block-divider { grid-column: 1 / -1; margin-top: 128px; }
.full-para__inner > .block-divider { margin-top: 198px; }
.news__inner > .block-divider { margin-top: 208px; }
.article-block .block-divider { margin-top: 100px; }
@media (max-width: 1024px) { .welcome__inner > .block-divider { margin-top: 106px; } .news__inner > .block-divider { margin-top: 186px; } }
@media (max-width: 700px) { .welcome__inner > .block-divider { grid-column: 1; margin-top: 90px; } .news__inner > .block-divider { margin-top: 170px; } }
.is-last.welcome .welcome__inner { padding-bottom: 150px; }

/* ================= 2 column image and text: optional quote, text column off ================= */
.split__quote { margin: 40px 0 0; font-weight: 100; font-size: clamp(28px, 1.6667vw, 52px); line-height: 1.3; color: #000; }
.split--no-text .split__image { flex: 1; aspect-ratio: 1500 / 580; }
.dots .dots__spacer { border: 0; background: none; width: 0; }
.article-pair .zoom img, .article-gallery .zoom img { aspect-ratio: 3 / 2; }