/* Loaded after style.css, so these override it */

/* ===== Every width ===== */

/* Space at the screen edges. The max-width grows by the same amount, so wide screens keep the same 1300px content */
header,
main,
footer {
    max-width: calc(1300px + 2 * 32px);
    padding-inline: clamp(16px, 4vw, 32px);
    box-sizing: border-box;
}

/* The menu button is only for the phone panel (800px or less, below) */
.menu-button {
    display: none;
}

/* On wider screens the links stay in the nav's row, as if this wrapper weren't there */
.nav-links {
    display: contents;
}

/* Touch screens: Portfolio's menu opened by a tap (main.js), the same as hovering */
.dropdown.open .dropdown-menu {
    opacity: 0.8;
    visibility: visible;
    transform: translateY(0);
}


/* ===== Small laptops and tablets on their side: 3 images per row ===== */

@media (max-width: 1100px) {
    .image-grid,
    .character-gallery,
    .tarot-gallery,
    .sketch-set-image-grid {
        --columns: 3;  /* main.js rebuilds the homepage and character art columns from this */
    }
}


/* ===== Tablets: 2 images per row, links in a menu panel ===== */

@media (max-width: 800px) {
    .image-grid,
    .character-gallery,
    .tarot-gallery,
    .sketch-set-image-grid {
        --columns: 2;
    }

    h1 {
        font-size: 34px;
    }

    /* About and Contact in one column */
    .contact-body,
    .about {
        grid-template-columns: 1fr;
    }

    .about .about-image {
        margin: 0 auto;
    }

    /* Sketch set: the bars at the top and bottom use the whole width */
    .sbar,
    .bottom-navigation {
        max-width: none;
    }

    /* Header: a smaller logo, and the menu button on the right */
    nav {
        margin-top: 12px;
        padding: 14px 0;
    }

    nav .title {
        margin-left: 32px;
    }

    nav .title p {
        font-size: 30px;
        line-height: 22px;
    }

    nav .title img,
    nav .title .logo-star {
        width: 96px;
        height: 96px;
        top: -28px;
        left: -44px;
    }

    .menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;  /* the lines line up with the page edge, the tap area reaches past it */
        padding: 0;
        border: none;
        background: none;
        color: var(--brass);
        cursor: pointer;
    }

    /* Three lines (the span and its ::before / ::after) that turn into an × while the panel is open */
    .menu-button span,
    .menu-button span::before,
    .menu-button span::after {
        display: block;
        width: 24px;
        height: 1px;
        background: currentColor;
        transition: transform 0.3s, background 0.3s;
    }

    .menu-button span {
        position: relative;
        color: inherit;  /* the button's gold, not the text grey every span gets */
    }

    .menu-button span::before,
    .menu-button span::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .menu-button span::before {
        top: -7px;
    }

    .menu-button span::after {
        top: 7px;
    }

    nav.open .menu-button span {
        background: transparent;
    }

    nav.open .menu-button span::before {
        transform: translateY(7px) rotate(45deg);
    }

    nav.open .menu-button span::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* The panel: hangs under the header, over the page, the full screen width (main.js opens it) */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        max-height: 80vh;
        overflow-y: auto;
        padding: 8px 0 12px;
        background: #181615;
        border-block: 1px solid var(--line);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    nav.open .nav-links {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-links > a,
    .dropdown .main-button {
        display: block;
        min-width: 0;
        padding: 12px 24px 12px 44px;
        text-align: left;
    }

    /* The current page's star sits left of its link instead of above it */
    nav .nav-star {
        left: 22px;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
    }

    .dropdown {
        padding: 0;
    }

    /* Portfolio is only a label here: its pages are listed right under it */
    .dropdown .main-button {
        pointer-events: none;
        color: var(--muted);
    }

    .dropdown .main-button::after {
        content: none;
    }

    /* Portfolio's pages: always shown in the panel, indented (same weight as the hover rules, so it wins) */
    .nav-links .dropdown .dropdown-menu {
        position: static;
        min-width: 0;
        padding: 0;
        background: none;
        border: none;
        opacity: 1;
        visibility: inherit;
        transform: none;
        transition: none;
    }

    .dropdown-menu a {
        margin: 0;
        padding: 10px 24px 10px 68px;
    }

    /* Edit page: the panel of images under the grid */
    .edit-layout {
        flex-direction: column;
    }

    .image-panel {
        width: 100%;
        position: static;
        max-height: none;
    }

    body:has(.image-panel) {
        padding-right: 0;
    }
}


/* ===== Phones: 1 image per row (2 for the cards) ===== */

@media (max-width: 500px) {
    .image-grid,
    .character-gallery {
        --columns: 1;
    }

    h1 {
        font-size: 30px;
    }

    .sketch-set-titles h1 {
        font-size: 26px;
    }

    /* Story: every scene the full width, its caption may wrap */
    .story-img-div {
        flex: 1 1 100%;
    }

    .story-caption {
        white-space: normal;
        height: auto;
    }

    /* Tarot: the "Draw a card" button under the subtitle */
    .tarot-intro {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 14px;
    }

    .tarot-intro h4,
    .tarot-intro .draw {
        grid-column: auto;
        justify-self: center;
    }

    .draw-flip {
        width: 28vw;
    }

    .draw-div {
        gap: 8px;
    }

    /* Lightbox captions in 2 columns */
    .lightbox-caption,
    .lightbox-fields {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Sketch set bars */
    .sbar {
        gap: 10px;
    }

    .curn {
        font-size: 16px;
    }

    .bn a {
        max-width: 48%;
    }

    /* Footer: one line under the other, without the stars between them */
    footer {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    footer .footer-div {
        align-self: stretch;  /* keeps its lines the full width */
    }

    footer p {
        margin: 0;
    }

    footer > .st {
        display: none;
    }
}


/* ===== Touch screens (no hover, at any width) ===== */

@media (hover: none) {
    /* Sketch Cards: the stacks in colour with their number of cards, and no fanning out after a tap */
    .stack img:not(.c0) {
        filter: none;
    }

    .stack-t p.sketch-set-card-info {
        opacity: 1;
    }

    .stack-box:hover .c0 {
        transform: none;
    }

    .stack-box:hover .c1 {
        transform: rotate(-2deg);
    }

    .stack-box:hover .c2 {
        transform: rotate(2.5deg);
    }

    .stack-box:hover .c3 {
        transform: rotate(-1deg);
    }

    /* No lifting, tilting or twinkling that would stay stuck after a tap */
    .sketch-div:hover {
        transform: none;
    }

    .tarot-img-div:hover img {
        transform: none;
    }

    .tarot-img-div:hover .tarot-twinkle-st {
        animation: none;
    }

    .bookcover-gallery .bookcover-img-div:hover {
        filter: none;
    }

    .bookcover-gallery .bookcover-img-div:hover a {
        transform: none;
    }

    .story-frame:hover .story-a,
    .story-frame:hover .story-b {
        opacity: 0;
        transform: none;
    }

    .story-frame:hover img {
        transform: none;
    }

    .character-gallery .character-img-div:hover {
        --lift: 0px;
    }

    .character-gallery .character-img-div:hover .character-glare {
        opacity: 0;
    }

    #drawbox.picking .draw-flip:not(.on):not(.dim):hover {
        --ty: 0px;
    }

    /* Lightbox: small round arrows in the bottom corners, under the image (swiping also works, main.js) */
    .lightbox-prev,
    .lightbox-next,
    .lightbox-prev:hover,
    .lightbox-next:hover {
        top: auto;
        bottom: 16px;
        width: 48px;
        height: 48px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.45);
        font-size: 28px;
        opacity: 0.6;
        transform: none;
    }

    .lightbox-prev {
        left: 16px;
    }

    .lightbox-next {
        right: 16px;
    }

    #lightbox img {
        max-height: calc(85vh - 72px);
    }
}