/* ==========================================================================
   Joshua Dow Photography — global styles
   Layout, typography, and animation live here. Component-level styling is
   done inline in the React components (see js/).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts

   NOTE: the previous build requested "Avenir" from Google Fonts. Avenir is a
   licensed Linotype typeface and is not on Google Fonts, so that request 404'd
   and every heading silently fell back to generic serif.

   Strategy now:
     1. local() first — Avenir Next ships with macOS and iOS, so Mac/iPhone
        visitors get the real typeface with no download at all.
     2. Jost (Google Fonts) as the web fallback — a geometric sans in the same
        family as Avenir/Futura. Loaded in index.html.
     3. System sans as the last resort.

   To use the genuine licensed webfonts, drop the .woff2 files into /fonts and
   uncomment the @font-face blocks below. Nothing else needs to change.
   -------------------------------------------------------------------------- */

/*
@font-face {
    font-family: 'Hera Big';
    src: url('../fonts/HeraBig-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Avenir LT';
    src: url('../fonts/AvenirLT-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Avenir LT';
    src: url('../fonts/AvenirLT-Roman.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Avenir LT';
    src: url('../fonts/AvenirLT-Black.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
*/

:root {
    --black: #000000;
    --cream: #FFF3E9;
    --light-grey: #E0E0E0;
    --taupe: #998575;
    --dark-taupe: #7a6b62;
    --soft-black: #1a1a1a;

    --font-display: 'Hera Big', 'Avenir Next', 'Avenir LT', 'Avenir', 'Jost', -apple-system, sans-serif;
    --font-body: 'Avenir Next', 'Avenir LT', 'Avenir', 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --tracking-wide: 0.15em;
    --tracking-mid: 0.12em;
    --tracking-tight: 0.08em;

    --page-x: 3rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

html, body, #root {
    width: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--black);
    color: var(--cream);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
}

h3 {
    font-family: var(--font-body);
    font-weight: 400;
}

button,
input,
select,
textarea {
    font-family: var(--font-body);
}

img {
    max-width: 100%;
    display: block;
}

/* Keyboard focus should always be visible, on both dark and cream sections. */
:focus-visible {
    outline: 2px solid var(--taupe);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Animation
   -------------------------------------------------------------------------- */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes imageLoad {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes carouselExit {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-40px); }
}

@keyframes carouselEnter {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.fade-in       { animation: fadeIn 0.8s ease-in-out forwards; }
.slide-in-left { animation: slideInLeft 0.8s ease-out forwards; }
.slide-in-right{ animation: slideInRight 0.8s ease-out forwards; }
.slide-in-up   { animation: slideInUp 0.7s ease-out forwards; }
.image-load    { animation: imageLoad 0.6s ease-out forwards; }

/* Respect the OS "reduce motion" setting: show content, skip the movement. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-animate] { opacity: 1 !important; }
}

/* --------------------------------------------------------------------------
   Package carousel

   Both cards occupy the same grid cell, so the outgoing card slides out left
   while the incoming card slides in from the right at the same time. The
   container reserves the height so nothing below it jumps during the swap.
   -------------------------------------------------------------------------- */

.carousel-stage {
    position: relative;
    width: 380px;
    min-height: 400px;
    flex-shrink: 0;
}

.carousel-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3rem 2.5rem;
    background-color: var(--dark-taupe);
    border-radius: 8px;
}

.carousel-card--exiting { animation: carouselExit 0.45s ease-out forwards; }
.carousel-card--entering { animation: carouselEnter 0.45s ease-out forwards; }

/* --------------------------------------------------------------------------
   Portfolio masonry grid

   Fixed heights per orientation so portrait images are never stretched into
   landscape slots (or the reverse). Landscape spans two columns.
   -------------------------------------------------------------------------- */

.masonry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-item {
    overflow: hidden;
    cursor: pointer;
    background-color: var(--soft-black);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1);
    transition: transform 0.4s ease, opacity 0.6s ease;
}

.gallery-item:hover img { transform: scale(1.05); }

.gallery-portrait  { grid-column: span 1; height: 420px; }
.gallery-landscape { grid-column: span 2; height: 280px; }

/* --------------------------------------------------------------------------
   Print shop grid
   -------------------------------------------------------------------------- */

.print-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 3rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.print-card-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--soft-black);
    margin-bottom: 1.25rem;
}

.print-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.print-card:hover .print-card-image img { transform: scale(1.05); }

.size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.25rem;
}

/* --------------------------------------------------------------------------
   Packages page
   -------------------------------------------------------------------------- */

.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* The animation wrapper sits between the grid and the card, so it has to pass
   the stretch through or cards in a row end up different heights. */
.package-tier-wrapper { display: flex; }

.package-tier {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
    border: 1px solid rgba(153, 133, 117, 0.35);
    background-color: var(--soft-black);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.package-tier:hover {
    border-color: var(--taupe);
    transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 760px;
    margin: 0 auto;
}

.form-field-full { grid-column: 1 / -1; }

.form-label {
    display: block;
    font-size: 0.8rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--taupe);
    margin-bottom: 0.6rem;
}

.form-input {
    width: 100%;
    padding: 0.9rem 1rem;
    background-color: transparent;
    border: 1px solid rgba(224, 224, 224, 0.3);
    color: var(--cream);
    font-size: 1rem;
    font-weight: 300;
    transition: border-color 0.3s ease;
}

.form-input::placeholder { color: rgba(255, 243, 233, 0.35); }
.form-input:focus { outline: none; border-color: var(--taupe); }

/* Native date pickers render a dark-on-dark icon in WebKit; invert it. */
.form-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.5;
    cursor: pointer;
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--taupe);
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Shared utilities
   -------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    text-decoration: none;
    background-color: var(--taupe);
    color: var(--cream);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover { background-color: var(--dark-taupe); }

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn:disabled:hover { background-color: var(--taupe); }

.btn--small { padding: 0.75rem 1.75rem; font-size: 0.85rem; }

.btn--ghost {
    background-color: transparent;
    border: 1px solid var(--taupe);
    color: var(--taupe);
}

.btn--ghost:hover { background-color: var(--taupe); color: var(--cream); }

.filter-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 3rem;
}

.filter-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.95rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--cream);
    cursor: pointer;
    transition: color 0.3s ease;
}

.filter-btn:hover,
.filter-btn[aria-pressed="true"] { color: var(--taupe); }
.filter-btn[aria-pressed="true"] { font-weight: 500; }

.section-heading {
    font-size: 3rem;
    color: var(--cream);
    text-align: center;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.section-subheading {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3.5rem;
    font-size: 1.05rem;
    line-height: 1.9;
    color: rgba(255, 243, 233, 0.7);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    :root { --page-x: 2rem; }

    .masonry-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-landscape { grid-column: span 2; height: 240px; }
    .gallery-portrait { height: 360px; }

    .section-heading { font-size: 2.4rem; }
}

@media (max-width: 768px) {
    :root { --page-x: 1.5rem; }

    /* Swap the inline desktop nav for a hamburger + drawer. */
    .nav-links-desktop { display: none !important; }
    .nav-toggle { display: block !important; }
    .nav-links-mobile { display: flex !important; }

    .masonry-grid { grid-template-columns: 1fr; gap: 1rem; }
    .gallery-portrait  { grid-column: span 1; height: 440px; }
    .gallery-landscape { grid-column: span 1; height: 240px; }

    .section-heading { font-size: 1.9rem; }
    .section-subheading { font-size: 0.95rem; margin-bottom: 2.5rem; }

    .form-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .date-grid { grid-template-columns: 1fr !important; }

    .filter-bar { gap: 1.25rem; margin-bottom: 2rem; }
    .filter-btn { font-size: 0.85rem; letter-spacing: 0.1em; }

    .print-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .package-grid { grid-template-columns: 1fr; }
    .package-tier { padding: 2rem 1.5rem; }

    /* Carousel goes full width and loses the fixed pixel width. */
    .carousel-stage { width: 100%; min-height: 420px; }
    .carousel-card { padding: 2.5rem 1.5rem; }

    /* Stack every side-by-side section. */
    .service-grid { grid-template-columns: 1fr !important; }
    .service-grid > div { border-right: none !important; }

    .about-container,
    .packages-container {
        flex-direction: column !important;
        gap: 2.5rem !important;
    }

    .about-image { width: 100% !important; max-width: 320px; }
    .about-text,
    .packages-carousel,
    .packages-info { width: 100% !important; }

    .about-text { text-align: center; }
}

@media (max-width: 480px) {
    .carousel-stage { min-height: 440px; }
    .section-heading { font-size: 1.6rem; }
}