@charset "UTF-8";
/* ==========================================================================
   ARLO PHOTO CREDITS — bespoke layout per designer mockup
   ~/Downloads/Arlo_PhotoCredits_1920x_v1 copy.jpg

   Loaded only on the /photo-credits/ page (conditional enqueue via
   is_page('photo-credits') in functions.php). Sits ALONGSIDE arlo-global
   (which provides Marigold + Muli + Cormorant font stacks + brand colors)
   but does NOT depend on content.css — this is a parallel pattern, not a
   variant of the deep content template.

   Structure:
     main.arlo-photo-credits
       .arlo-photo-credits-container (1100px max, centered, 40px sides)
         header.arlo-photo-credits-header (title + subhead + thanks + note)
         section.arlo-photo-credits-letter-section (one per A/B/C/...)
           .arlo-photo-credits-letter-divider
             span.arlo-photo-credits-letter (big serif letter)
             hr.arlo-photo-credits-letter-rule
           .arlo-photo-credits-entry (one per photographer)
             h2.arlo-photo-credits-name (uppercase Muli)
             p.arlo-photo-credits-meta (handle + url, brand accent)
             .arlo-photo-credits-grid (4 cols of photos)
               .arlo-photo-credits-photo (aspect-ratio 4:3, img inside)
         .arlo-photo-credits-cta ("View The Gallery" button)
   ========================================================================== */

.arlo-photo-credits {
    background: #fff;
    padding: 60px 0 100px;  /* bottom padding matches .arlo-photo-credits-cta margin-top → 100/100 balanced breathing room around the CTA button per designer 2026-05-17 */
}

.arlo-photo-credits-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* --- Header --- */

.arlo-photo-credits-header {
    text-align: center;
    margin-bottom: 80px;
}

.arlo-photo-credits-title {
    font-family: 'Marigold', serif;
    font-size: 38px;
    font-weight: 400;
    color: #555;
    margin: 0 0 30px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
}

.arlo-photo-credits-subhead {
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #333;
    margin: 0 0 28px;
    line-height: 1.6;
}

.arlo-photo-credits-thanks {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #333;
    line-height: 1.75;
    max-width: 600px;
    margin: 0 auto 24px;
}

.arlo-photo-credits-note {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    color: #333;
    margin: 0;
}

/* --- Letter section divider --- */

.arlo-photo-credits-letter-section {
    margin-bottom: 70px;
}

.arlo-photo-credits-letter-section:last-of-type {
    margin-bottom: 0;
}

.arlo-photo-credits-letter-divider {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 32px;
}

.arlo-photo-credits-letter {
    font-family: 'Marigold', serif;
    font-size: 44px;
    font-weight: 400;
    color: #5a544f;  /* designer token — letters are darker than placeholders */
    line-height: 1;
    flex-shrink: 0;
}

.arlo-photo-credits-letter-rule {
    flex: 1;
    height: 1px;
    border: 0;
    background-color: #dad7d5;  /* designer token — coordinated with letter + placeholders */
    margin: 0;
    max-width: none !important;  /* parent theme caps hr at max-width:100px — override */
    width: auto;
}

/* --- Photographer entry --- */

.arlo-photo-credits-entry {
    margin-bottom: 56px;
}

.arlo-photo-credits-entry:last-child {
    margin-bottom: 0;
}

.arlo-photo-credits-name {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #3d3730;
    margin: 0 0 8px;
    line-height: 1.4;
}

.arlo-photo-credits-meta {
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #c98667;
    margin: 0 0 24px;
}

/* Handle + website both render as brand-accent links (inherit #c98667 from
   .arlo-photo-credits-meta), no underline at rest, underline on hover. The
   @handle links to the photographer's Instagram (new window); the website
   links to their site. Unified 2026-06-18 when handles became IG links. */
.arlo-photo-credits-handle,
.arlo-photo-credits-url {
    color: inherit;
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.arlo-photo-credits-handle:hover,
.arlo-photo-credits-url:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.arlo-photo-credits-sep {
    margin: 0 8px;
    color: inherit;
}

/* --- Photo grid — locked height, natural-width per photo's aspect ratio.
   Designer (Lisa) supplies pre-sized 120px-tall thumbnails — width follows
   each source photo's natural aspect ratio (62–181 px in practice). Flex-wrap
   packs different-width photos into magazine-style rows. No object-fit:cover
   needed since width is driven by the image itself. --- */

.arlo-photo-credits-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;  /* doubled from 8 → 16 per designer 2026-05-17 */
}

.arlo-photo-credits-photo {
    height: 120px;  /* designer-locked — Lisa delivers thumbs at 120px tall */
    background-color: #dad7d5;  /* designer token — same as letters + rule */
    overflow: hidden;
    flex-shrink: 0;
    /* width is auto — img inside drives container width */
}

.arlo-photo-credits-photo img {
    height: 120px;
    width: auto;
    display: block;
}

/* --- CTA --- */

.arlo-photo-credits-cta {
    text-align: center;
    margin-top: 100px;  /* doubled from 50 → 100; matches container padding-bottom for balanced above/below */
}

/* ==========================================================================
   Responsive — tablet collapses to 3 cols, phone to 2 cols.
   Below 480px, drop container side padding from 40 → 25 to match content.css.
   ========================================================================== */

@media (max-width: 767px) {
    .arlo-photo-credits {
        padding: 40px 0 60px;
    }
    .arlo-photo-credits-header {
        margin-bottom: 56px;
    }
    .arlo-photo-credits-title {
        font-size: 32px;
    }
    .arlo-photo-credits-letter {
        font-size: 36px;
    }
    /* Phones — thumb height drops to 96px, widths follow aspect ratio */
    .arlo-photo-credits-photo,
    .arlo-photo-credits-photo img { height: 96px; }
}

@media (max-width: 480px) {
    .arlo-photo-credits-container {
        padding: 0 25px;
    }
    .arlo-photo-credits-letter {
        font-size: 32px;
    }
}