/* ============================================
   RESPONSIVE.CSS — Mobile breakpoint: 768px
   ============================================ */

/* Global toggle defaults */
.mobile-only  { display: none; }  /* hidden unless told otherwise */
.desktop-only { display: block; } /* visible by default */
/* ========================
/* -------- NAVBAR --------
======================== */
@media (max-width: 768px) {
    nav {
        background-color: transparent;
    }
    nav .right a {
        display: none;
    }
    nav .left a {
        padding-left: 10px;
    }
    /* add a hamburger menu icon here if needed */
}

/* ========================
---------- HERO -----------
======================== */
@media (max-width: 768px) {
    .hero-title-wrap {
        left: 10px;
        padding: 0;
    }   
    .tattoo-hero h1 {
        font-size: 5rem;
        line-height: 0.8;
    }
}


/* ========================
-------- ABOUT ME --------- 
======================== */
@media (max-width: 1048px) {

    .flash-row.project {
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        height: 80vh;
    }
    .project-video {
        display: none;
    }
}

@media (max-width: 768px) {
    .project-section {
        min-height: 80vh;
    }
    .desktop-only {
        display: none;
    }
    .project-video {
        display: none;
    }
    .project-img {
        
    }
    .flash-row.project {
        grid-template-columns: 1fr;
        grid-template-rows: 3fr 1fr;
        padding: 10px;
        height: 80vh;
    }
    .project-text-space p.pt-b {color: var(--carbon-black); text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 5px rgba(0, 0, 0, 0.08);}
    .project-text-space p.pt-c {color: var(--carbon-black); text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 5px rgba(0, 0, 0, 0.08);}
    .project-text-space p.pt-d {color: var(--carbon-black); text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 5px rgba(0, 0, 0, 0.08);}
    .project-text-space p.pt-e {color: var(--carbon-black); text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 5px rgba(0, 0, 0, 0.08);}
    .project-text-space p.pt-f {color: var(--carbon-black); text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 5px rgba(0, 0, 0, 0.08);}
    .project-text-space p.pt-g {color: var(--carbon-black); text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 5px rgba(0, 0, 0, 0.08);}

}

/* =============================
--------- FLASH SECTION -------- 
============================= */
@media (max-width: 768px) {
    #flash {
        padding: 120px 10px 10px 10px;
    }

    .flash-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        height: 80vh;
    }

    /* ------------ FLASH ROW ONE ---------- */
    .flash-row.row-one {
        grid-template-columns: 1fr;
        grid-template-rows: auto;   /* ← let children define their own height */
        height: auto;               /* ← remove fixed 80vh that fights scroll band */
        gap: 10px;
    }

    /* Video takes its own defined height */
    .flash-row.row-one .col:last-child {
        width: 100%;
        height: 50vh;               /* ← explicit height for the video col */
    }

    .rotator-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* ---------- FLASH SCROLL BAND ---------- */

    /* Hidden on desktop */
    .flash-scroll-band {
        display: none;
    }

@media (max-width: 768px) {
    .landscape-carousel {
        display: none;
    }

    .flash-scroll-band {
        display: flex !important;
        flex-direction: row;
        overflow-x: scroll;
        overflow-y: hidden;
        gap: 8px;
        padding: 12px 0px;
        scroll-snap-type: none; /* ← no snapping, free scroll */
        -webkit-overflow-scrolling: touch;
        height: 60vw;            /* ← explicit height, replaces "auto" */
        min-height: 60vw;        /* ← prevents parent grid from collapsing it */
        width: 100%;
    }

    .flash-scroll-band::-webkit-scrollbar {
        display: none;
    }

    .flash-scroll-band img {
        height: 60vw;
        width: auto;
        flex-shrink: 0;
        scroll-snap-align: none;
        object-fit: cover;
        display: block !important;   /* override any inherited hide rules */
    }


}


/* ----- FLASH ROW TWO ----- */
    /* Hidden on desktop — cursor handles navigation there */
.carousel-arrow {
    display: none;
}

@media (max-width: 768px) {
    .carousel-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: none;       /* ← no box */
        border: none;
        padding: 8px;
        cursor: pointer;
    }

    .carousel-arrow svg {
        width: 32px;
        height: 32px;
    }

    .carousel-arrow.prev { left: 6px; }
    .carousel-arrow.next { right: 6px; }


    .flash-row.row-2 {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr;
    }

    .grid-3.hover-scribble {
        height: 30vh
    }
    .grid-3.hover-scribble > div img {
            object-fit: cover;
    }
    .carousel.single {
            width: 100%;
            height: 60vh;
            object-fit: cover;
            display: block;
            padding-bottom: 90px
    }
}

/* ================================
   COLLAB SECTION — Mobile
================================ */

/* Base: hide mobile-only collab elements on desktop */
.collab-static-mobile { display: none; }
.collab-scroll-band   { display: none; }
.collab-artist-desc   { display: none; }

@media (max-width: 768px) {

    /* Force desktop rows off */
    .desktop-only {
        display: none !important;
    }

    /* Remove any fixed height from the section itself */
    .collab-section {
        height: auto !important;
        padding-top: 24px;
    }

    /* --- Static image / video --- */
    .collab-static-mobile {
        display: block !important;
        width: 100%;
        height: 70vw;
        overflow: hidden;
    }

    .collab-static-mobile img,
    .collab-static-mobile video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* --- Scroll bands --- */
    .collab-scroll-band {
        display: flex !important;
        flex-direction: row;
        overflow-x: scroll;
        overflow-y: hidden;
        gap: 8px;
        padding: 12px 0;
        height: 60vw;
        min-height: 60vw;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .collab-scroll-band::-webkit-scrollbar {
        display: none;
    }

    .collab-scroll-band img {
        height: 100%;
        width: auto;
        flex-shrink: 0;
        object-fit: cover;
        display: block !important;
    }

    /* --- Artist description beneath each band --- */
    .collab-artist-desc {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        padding: 14px 20px 20px;
        border-bottom: 1px solid var(--carbon-black);
        margin-bottom: 4px;
        width: 100%;
        box-sizing: border-box;
    }

    .collab-handle {
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 600;
    }

    .collab-artist-desc p {
        font-size: 0.8rem;
        line-height: 1.5;
        opacity: 0.6;
        margin: 0;
    }

}

/* ----- FLASH GAPS ----- */
@media (max-width: 768px) {
    .flash-row.equal-col {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }
    .grid-6 {
        grid-template-columns: repeat(2, 1fr);

    }

    /* ----- FLASH GAPS ----- */
    .flash-gap--1 {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 5px;
        padding: 0 10px 0 10px;
    }
    .flash-gap--2 {
        padding: 10px 10px 0 10px;    
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }
    .flash-gap--3 {
        padding: 0px 10px 0 10px;    
        grid-template-columns: 1fr;
        gap: 5px;
        height: 1vh;
    }
    .flash-gap--4 {
        padding: 0px 10px 0px 10px;    
        grid-template-columns: 1fr;
        gap: 5px;
        height: 15vh;
    }

    .gap-text {
        margin: 0;
        align-self: center;
    }
    .gap-text:first-child {
        display: none;
    }
}

/* ---------- BOOKING ---------- */
    .mobile-booking-btn {
        display: none;
    }
    .mobile-only {
        display: none;
    }
@media (max-width: 768px) {

    /* Layout */
    .booking-section {
        padding: 40px 0px;          /* remove left/right padding entirely */
    }

    .booking-section h2,
    .booking-section > p {
        margin-left: 20px;
        margin-right: 20px;
    }

    .booking-cards {
        grid-template-columns: 1fr;
        margin: 0px;                /* flush to edges */
        gap: 1px;                   /* thin border line between stacked cards */
    }

    .booking-card {
        padding: 1.5rem 20px;       /* reduce card padding */
    }

    /* Hide individual book buttons */
    .booking-btn.desktop-only {
        display: none;
    }

    /* Show single mobile button */
    .mobile-booking-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: var(--carbon-black);
        color: var(--white);
        text-decoration: none;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 600;
        padding: 16px 20px;
        margin: 20px 20px 0px;      /* aligns with card text */
        width: calc(100% - 40px);   /* full width minus side margins */
    }

    /* Image swap */
    .booking-image-row .desktop-only { display: none; }
    .booking-image-row .mobile-only  { display: block; }

    .booking-image-row {
        margin: 20px 0px 0px;       /* flush left and right */
        height: auto;
    }

    .booking-image-row img {
        height: 40vh;               /* portrait crop height — adjust to taste */
        object-fit: cover;
    }
}

/* ---------- AFTERCARE ---------- */
@media (max-width: 768px) {

    .aftercare-image img.mobile-only  { display: block; }
    .aftercare-image img.desktop-only { display: none;  }

    .aftercare-image {
        max-height: none;       /* let portrait breathe vertically */
        padding: 20px 0px 0px;
    }

    .aftercare-image img {
        height: 50vh;           /* adjust to taste */
        object-fit: cover;
    }
}

/* ---------- STUDIO ---------- */
@media (max-width: 768px) {
}