/* -----------------------------------------------------------------------------
   Hero

   An asymmetric split rather than a headline centred over a darkened photo.
   Text sits on solid ground, so its contrast never depends on the picture.
   The photograph is monochrome, so it cannot fight the clay palette.
   ----------------------------------------------------------------------------- */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    background-color: var(--bg-light);
    color: var(--slate);
    text-align: left;
    padding: 0;
    min-height: min(84svh, 760px);
    overflow: hidden;
}

.hero-text {
    /* Line the copy up with .container's left edge, then let the photograph
       run off the right of the viewport. */
    padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 7vw, 5rem)
             max(1.5rem, calc((100vw - 1200px) / 2 + 15px));
}

.hero h1 {
    font-size: clamp(2.25rem, 5.2vw, 3.5rem);
    margin-bottom: 1.25rem;
    color: var(--clay-dark);
    letter-spacing: -0.015em;
}

.hero-lede {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    max-width: 42ch;
    margin-bottom: 2rem;
    color: var(--slate);
}

.hero-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-reassure {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.hero-reassure .icon {
    color: var(--moss);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.hero-media {
    position: relative;
    align-self: stretch;
    min-height: 320px;
    margin: 0;
    background-color: #1c1c1c;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keep the two faces in frame as the crop tightens. */
    object-position: 60% 32%;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.hero-media.loaded img {
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   The fear-killer band

   A first-timer's only real question is "will I be bad at this?". The page
   answers it before it asks for anything.
   ----------------------------------------------------------------------------- */
.no-skill {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
    background-color: var(--sand);
}

.no-skill-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.no-skill-lead {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.25;
    color: var(--clay-dark);
    margin-bottom: 1.25rem;
    text-wrap: balance;
}

.no-skill-media {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: #1a1c1b;
    aspect-ratio: 3 / 2;
}

.no-skill-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.no-skill-media.loaded img {
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   About
   ----------------------------------------------------------------------------- */
.about-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.about-text p {
    margin-bottom: 1rem;
}

.about-maker {
    margin-top: 1.25rem;
    padding-left: 1.25rem;
    border-left: 1px solid var(--clay-light);
    color: var(--text-muted);
}

.about-media {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: #1c2221;
    aspect-ratio: 4 / 5;
}

.about-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 50%;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.about-media.loaded img {
    opacity: 1;
}

/* A ruled list. Three identical icon cards were the clearest template tell
   on the page. */
.facts {
    margin-top: 2.5rem;
    border-top: 1px solid var(--clay-light);
}

.fact {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) 1fr;
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--clay-light);
}

.fact dt {
    font-weight: 700;
    color: var(--clay-dark);
}

.fact dd {
    margin: 0;
    color: var(--text-muted);
}

.pricing {
    background-color: var(--sand);
}

/* -----------------------------------------------------------------------------
   Section titles

   The 80px clay rule used to sit under all seven section headings, which is
   what made the page read as one template repeated. It now marks the two
   sections that anchor the page, and nothing else.
   ----------------------------------------------------------------------------- */
.section-title--start {
    text-align: left;
    margin-bottom: 2rem;
}

.section-title--start::after {
    content: none;
}

.section-title--anchor {
    margin-bottom: 3.5rem;
}

/* -----------------------------------------------------------------------------
   Calendar band: the spine of the page
   ----------------------------------------------------------------------------- */
.calendar-band {
    background-color: var(--sand);
}

.calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.calendar-main {
    min-width: 0;
}

.calendar-layout .calendar-container {
    max-width: none;
}

/* Below 1090px the side panel squeezes the day cells under 81px and
   the labeled chips clip. Stack early instead. */
@media (max-width: 1080px) {
    .calendar-layout {
        grid-template-columns: 1fr;
    }
}

.group-panel {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
}

.group-panel h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.group-panel > p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.group-facts {
    margin: 1.25rem 0 1.5rem;
    border-top: 1px solid var(--sand);
}

.group-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--sand);
    font-size: 0.9rem;
}

.group-facts dt {
    color: var(--text-muted);
}

.group-facts dd {
    margin: 0;
    font-weight: 600;
    color: var(--clay-dark);
    text-align: right;
}

/* -----------------------------------------------------------------------------
   Gallery: an editorial mix rather than a uniform grid. Every source frame is
   3:2 landscape, so the layout is built to 3:2 and never crops to portrait.
   ----------------------------------------------------------------------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

/* The opening frame gets four times the room. Every tile stays square, so a
   2x2 span lines up exactly with two rows plus the gap between them. */
.gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);

    /* Aspect ratio using CSS custom property from template */
    /* Fallback to square if not set */
    aspect-ratio: 1;
    background-color: #f0ebe6;
}

/* Use padding-bottom trick for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1) {
    .gallery-item {
        height: 0;
        padding-bottom: var(--aspect-ratio, 100%);
    }

    .gallery-item > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.gallery-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(10px);
    transform: scale(1.1); /* Prevent blur edges showing */
    transition: opacity 0.4s ease-out;
    z-index: 1;
}

.gallery-item.loaded .gallery-placeholder {
    opacity: 0;
    pointer-events: none;
}

.gallery-item picture {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.gallery-item.loaded .gallery-img {
    opacity: 1;
}

.no-js .gallery-img,
noscript + .gallery-img {
    opacity: 1;
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    padding: 2rem 1rem 1rem;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity var(--transition-normal);
    z-index: 2;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
}

#gallery-controls {
    margin-top: 2rem;
}

.gallery-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.gallery-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gallery-buttons .btn .icon {
    font-size: 0.9rem;
}

.gallery-empty {
    text-align: center;
    color: var(--text-muted);
}

.gallery-item-loading {
    background: linear-gradient(90deg, #f0ebe6 25%, #e8e3de 50%, #f0ebe6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .gallery-caption {
        padding: 1.5rem 0.75rem 0.75rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-item,
    .gallery-placeholder,
    .gallery-img,
    .gallery-caption {
        transition: none;
    }

    .gallery-img {
        opacity: 1;
    }

    .gallery-placeholder {
        display: none;
    }

    .gallery-item-loading {
        animation: none;
    }
}

.contact {
    background-color: var(--sand)
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.contact-info {
    min-width: 200px;
}

.contact-info h3 {
    margin-bottom: 1.5rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: var(--clay);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-item h4 {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.contact-item p {
    margin: 0;
    color: var(--slate);
}

.contact-item a {
    color: var(--clay);
}

.contact-item a:hover {
    text-decoration: underline;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-link {
    width: 45px;
    height: 45px;
    background: var(--clay);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all var(--transition-normal);
}

.social-link:hover {
    background: var(--clay-dark);
    transform: translateY(-3px);
}

.contact-form {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.contact-form h3 {
    margin-bottom: 1.5rem;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form .form-group {
    margin-bottom: 0;
}

.contact-map-section {
    margin-top: 1.5rem;
}

.contact-address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--white);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    color: var(--clay-dark);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.contact-address:hover {
    color: var(--clay);
}

.contact-address .icon {
    color: var(--clay);
}

.contact-map {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 280px;
    border: none;
}

@media (max-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-info {
        text-align: center;
    }

    .contact-info h3 {
        margin-bottom: 1.5rem;
    }

    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .contact-item h4,
    .contact-item p {
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    .contact-map-section {
        text-align: left;
    }

    .contact-address {
        justify-content: center;
    }

    .contact-form {
        padding: 1.5rem;
    }
}

.footer {
    background-color: var(--clay-dark);
    color: var(--white);
    text-align: center;
    padding: 3rem 0;
}

.footer-logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--white);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 1rem;
}

.footer p {
    margin-bottom: 1rem;
    opacity: 0.9;
}

.copyright {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.7;
    font-size: 0.9rem;
}

/* -----------------------------------------------------------------------------
   Testimonials: sand ground, like pricing. The white cards need a ground
   that separates them; bg-light sits at 1.03:1 against white and cannot.
   ----------------------------------------------------------------------------- */
.testimonials {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
    background-color: var(--sand);
}

.carousel {
    position: relative;
    margin-top: 1rem;
    padding: 0 3rem;
}

.carousel-viewport {
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}

.testimonial-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: calc((100% - 4rem) / 3);
    margin: 0 0.667rem;
    transition: box-shadow 0.2s ease;
}

.testimonial-card:hover {
    box-shadow: var(--shadow-md);
}

.testimonial-stars {
    color: #d4a373;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.15rem;
}

.testimonial-text {
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.7;
    flex: 1;
    margin: 0 0 1.25rem 0;
    border: none;
    padding: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.testimonial-author {
    font-weight: 600;
    color: var(--clay-dark);
    font-size: 0.95rem;
    margin: 0;
}

/* Arrow buttons */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: calc(50% - 2rem);
    transform: translateY(-50%);
    background: var(--white);
    /* #e0d8d0 disappears on the sand ground; the clay ring reads as a control. */
    border: 2px solid var(--clay);
    color: var(--clay-dark);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    z-index: 2;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.carousel-prev:hover,
.carousel-next:hover {
    background: var(--clay);
    color: var(--white);
    border-color: var(--clay);
}

.carousel-prev {
    left: 0;
}

.carousel-next {
    right: 0;
}

/* Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

/* An unselected dot is a clay ring, not a pale fill. A pale fill sat at
   1.45:1 against the page and failed the 3:1 floor for a control. */
.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--clay);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.carousel-dot:hover {
    background: var(--clay-light);
}

.carousel-dot.active {
    background: var(--clay);
    transform: scale(1.2);
}

.carousel-play-toggle {
    display: block;
    margin: 1rem auto 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--clay);
    background: transparent;
    color: var(--clay-dark);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.carousel-play-toggle:hover {
    background: var(--clay);
    color: var(--white);
}

.carousel-play-toggle:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Swipe hint - hidden by default, shown on mobile */
.carousel-swipe-hint {
    display: none;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 1rem;
    animation: swipeHintFade 4s ease forwards;
}

@keyframes swipeHintFade {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

@media (max-width: 992px) {
    .testimonial-card {
        width: calc((100% - 2rem) / 2);
        margin: 0 0.5rem;
    }
}

@media (max-width: 600px) {
    .carousel {
        padding: 0;
    }

    .testimonial-card {
        width: calc(100% - 1rem);
        margin: 0 0.5rem;
    }

    .carousel-prev,
    .carousel-next {
        display: none;
    }

    .carousel-swipe-hint {
        display: block;
    }
}

@media (max-width: 992px) {
    .contact-container {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        text-align: center;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item:first-child {
        grid-column: span 1;
        grid-row: span 1;
    }

    .contact-form-wrapper {
        padding: 1.5rem;
    }
}

/* -----------------------------------------------------------------------------
   Concept A: stacking rules for the new asymmetric sections
   ----------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 0;
    }

    /* The photograph leads on a phone. It is the thing that sells the class. */
    .hero-media {
        order: -1;
        aspect-ratio: 3 / 2;
        min-height: 0;
    }

    .hero-text {
        padding: clamp(2rem, 7vw, 3rem) 1.5rem;
    }

    .hero-lede {
        max-width: none;
    }

    .no-skill-inner,
    .about-grid,
    .calendar-layout {
        grid-template-columns: 1fr;
    }

    /* The photograph leads the hero, but not the About section: a section
       that opens on an untitled image reads as a stray photo. */
    .about-media {
        aspect-ratio: 3 / 2;
    }

    .group-panel {
        order: 2;
    }
}

@media (max-width: 560px) {
    .fact {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* -----------------------------------------------------------------------------
   Thumb-zone booking bar

   PRODUCT.md asks that every road lead to a slot. On a phone that means the
   route stays within reach of a thumb, not eight scrolls back up.
   ----------------------------------------------------------------------------- */
.sticky-book {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    /* The bar floats over page content, so its edge has to be a real edge.
       clay-light read at 1.49:1 here, which is not a boundary. */
    border-top: 1px solid var(--clay);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform var(--transition-normal);
}

/* display:flex on the class outruns the user-agent [hidden] rule, so the bar
   has to opt out of layout explicitly or it ships visible. */
.sticky-book[hidden] {
    display: none;
}

.sticky-book.is-visible {
    transform: translateY(0);
}

.sticky-book-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--clay-dark);
}

.sticky-book .btn {
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .sticky-book {
        display: none;
    }
}

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

    .hero-media img,
    .no-skill-media img,
    .about-media img {
        opacity: 1;
        transition: none;
    }
}