/* ==========================================================================
   projects.css
   Card grid on projects/index.php + the project breakdown page (project.php).
   Loaded AFTER style.css. Class prefixes: .pcard* (index), .pdetail* (breakdown).
   Do not confuse with project-styles.css, which belongs to the services pages.
   ========================================================================== */

/* ---------- shared bits ---------- */
.p-eyebrow {
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #e57f25;
    margin: 0 0 10px;
}

.p-btn {
    display: inline-block;
    font-family: "Open Sans", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #e57f25;
    border: 1.5px solid #e57f25;
    padding: 10px 17px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.p-btn:hover,
.p-btn:focus-visible {
    background: #e57f25;
    color: #fff;
    outline: none;
}

.p-btn-solid {
    background: #e57f25;
    color: #fff;
    border-color: #e57f25;
}

.p-btn-solid:hover,
.p-btn-solid:focus-visible {
    background: #032540;
    border-color: #032540;
    color: #fff;
}

/* ---------- index: section heading ---------- */
.pcard-intro {
    padding-top: 10px;
}

.pcard-intro h2 {
    font-family: "Montserrat", sans-serif;
    color: #032540;
    font-size: 31px;
    line-height: 1.15;
    margin: 0;
}

.pcard-intro p {
    max-width: 62ch;
    margin: 14px 0 0;
    font-size: 15.5px;
}

/* ---------- index: card grid ---------- */
.pcard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin: 34px 0 62px;
}

.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4e7ea;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.pcard:hover {
    box-shadow: 0 14px 34px rgba(3, 37, 64, 0.13);
    transform: translateY(-3px);
}

/* Whole card is the click target. The Read More link stays the real, focusable
   control; this overlay just stretches its hit area over the entire card, so
   there is still exactly one link per card for screen readers and keyboards. */
.pcard .p-btn::after {
    content: "";
    position: absolute;
    inset: 0;
}

.pcard:hover {
    cursor: pointer;
}

/* Hovering anywhere on the card lights up the button, so the affordance reads. */
.pcard:hover .p-btn {
    background: #e57f25;
    color: #fff;
}

.pcard-shot {
    position: relative;
    height: 196px;
    background-size: cover;
    background-position: center;
}

.pcard-tag {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #e57f25;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 6px 11px;
}

.pcard-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 11px;
    padding: 22px 22px 24px;
}

.pcard-body h3 {
    font-family: "Montserrat", sans-serif;
    color: #032540;
    font-size: 18px;
    line-height: 1.24;
    margin: 0;
}

.pcard-meta {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8b949b;
}

.pcard-body p {
    flex: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.62;
}

.pcard-body .p-btn {
    align-self: flex-start;
}

/* ---------- index: gallery heading above the existing images ---------- */
.pgallery-head {
    border-top: 1px solid #e4e7ea;
    padding-top: 52px;
    margin-bottom: 24px;
}

.pgallery-head h2 {
    font-family: "Montserrat", sans-serif;
    color: #032540;
    font-size: 25px;
    margin: 0;
}

/* ---------- breakdown: hero ---------- */
/* project.php MUST set the photo with the `background-image` longhand, never the
   `background` shorthand — the shorthand would reset the background-color,
   size, and position below. */
.pdetail-hero {
    position: relative;
    background-color: #032540;
    background-size: cover;
    background-position: center;
    padding: 78px 0 72px;
}

/* Navy scrim over the photo, heaviest on the left where the text sits and
   nearly clear on the right so the image reads. TO MAKE THE PHOTO LIGHTER OR
   DARKER, change only these three alpha values — raise them for more navy,
   lower them for more photo. Keep the leftmost around 0.70+ or white text on
   a bright sky or sand will stop being legible. */
.pdetail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(3, 37, 64, 0.80) 0%,
        rgba(3, 37, 64, 0.55) 45%,
        rgba(3, 37, 64, 0.25) 100%
    );
}

/* Lift the text above the scrim. */
.pdetail-hero .container {
    position: relative;
    z-index: 1;
}

/* Narrow screens put the text across the full width, so the left-to-right
   falloff would leave the h1 sitting on bare photo. Flatten it there. */
@media (max-width: 767px) {
    .pdetail-hero::before {
        background: linear-gradient(
            90deg,
            rgba(3, 37, 64, 0.80) 0%,
            rgba(3, 37, 64, 0.66) 100%
        );
    }
}

/* #navContainer is position:fixed at BOTH of style.css's breakpoints, so every
   top-of-page hero must clear it. These offsets mirror .subpage-hero in
   style.css (107px at min-width:1100px, 79px at max-width:1099px). They use the
   site's real breakpoint, not the 991/767 ones further down this file. */
@media (min-width: 1100px) {
    .pdetail-hero {
        margin-top: 107px;
    }
}

@media (max-width: 1099px) {
    .pdetail-hero {
        margin-top: 79px;
    }
}

.pdetail-crumb {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 20px;
}

.pdetail-crumb a {
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
}

.pdetail-crumb a:hover {
    color: #fff;
}

.pdetail-crumb b {
    color: #e57f25;
    font-weight: 700;
}

/* max-width keeps the h1 off the right side of the photo, where the scrim is
   nearly clear and white text stops being legible. Widen it and the title takes
   fewer lines, but don't go past roughly 30ch — that is about where the text
   reaches the transparent end of the gradient. */
.pdetail-hero h1 {
    font-family: "Montserrat", sans-serif;
    color: #fff;
    font-size: 40px;
    line-height: 1.08;
    margin: 0;
    max-width: 28ch;
}

.pdetail-lede {
    color: rgba(255, 255, 255, 0.85);
    max-width: 60ch;
    margin: 18px 0 0;
    font-size: 16px;
}

/* ---------- breakdown: spec strip ---------- */
.pdetail-specs {
    background: #f6f8f9;
    border-bottom: 1px solid #e4e7ea;
}

/* The strip takes however many keys the project's 'specs' array has, so the
   column count is NOT hard-coded here — project.php computes --spec-cols so the
   last row always comes out full (6 specs -> 3 columns, not 4 + 2 leftovers).
   The 4 below is only a fallback for when the variable is missing.
   Dividers are the 1px grid gap letting the container's background show through
   between cells. That is why every row must be full: an empty grid track shows
   this same #e4e7ea and reads as a grey block. Don't swap back to border-right —
   on a wrapped row the last cell of each row keeps a stray edge. */
.pdetail-specs .container {
    display: grid;
    grid-template-columns: repeat(var(--spec-cols, 4), 1fr);
    gap: 1px;
    background: #e4e7ea;
}

.pdetail-spec {
    padding: 26px 24px 28px;
    background: #f6f8f9;
}

.pdetail-spec dt {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #e57f25;
    margin-bottom: 8px;
}

.pdetail-spec dd {
    font-family: "Montserrat", sans-serif;
    color: #032540;
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
}

/* ---------- breakdown: narrative, centered column ---------- */
.pdetail-body {
    padding: 58px 0 10px;
}

.pdetail-body .container {
    max-width: 812px;
}

.pdetail-body h2 {
    font-family: "Montserrat", sans-serif;
    color: #032540;
    font-size: 23px;
    margin: 38px 0 14px;
}

.pdetail-body h2:first-child {
    margin-top: 0;
}

.pdetail-body p {
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0 0 16px;
}

.pdetail-body ul {
    margin: 0 0 16px;
    padding-left: 20px;
    font-size: 15.5px;
    line-height: 1.8;
    color: #555;
}

.pdetail-body ul li::marker {
    color: #e57f25;
}

/* ---------- breakdown: subheads + standfirst ----------
   h3 is a minor heading inside a section (e.g. "Installation Details:") and sits
   tighter to the list below it than h2 does. .pdetail-standfirst is the bold
   one-line summary that runs directly under the opening h2. */
.pdetail-body h3 {
    font-family: "Montserrat", sans-serif;
    color: #032540;
    font-size: 17px;
    font-weight: 700;
    margin: 26px 0 10px;
    clear: both;
}

.pdetail-standfirst {
    font-family: "Montserrat", sans-serif;
    color: #032540;
    font-weight: 700;
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
}

/* ---------- breakdown: highlight + callout boxes ----------
   .pdetail-highlights is the centered stat panel; .pdetail-callout is the dark
   CTA panel. Both are written by hand in projects/content/<slug>.php. Their h3
   overrides the .pdetail-body h3 rule above, so the margin is reset to 0. */
.pdetail-highlights {
    background: #f6f8f9;
    border: 1px solid #e4e7ea;
    text-align: center;
    padding: 26px 28px 28px;
    margin: 32px 0;
    clear: both;
}

.pdetail-body .pdetail-highlights h3 {
    font-size: 19px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #032540;
    margin: 0 0 12px;
}

.pdetail-body .pdetail-highlights p {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.9;
    color: #4a5560;
    margin: 0;
}

.pdetail-callout {
    background: #032540;
    padding: 28px 32px 30px;
    margin: 36px 0 8px;
    clear: both;
}

.pdetail-body .pdetail-callout h3 {
    color: #fff;
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 12px;
}

.pdetail-body .pdetail-callout h3 i {
    color: #e57f25;
    margin-right: 10px;
}

.pdetail-body .pdetail-callout p {
    color: #cdd6de;
    margin: 0;
}

.pdetail-callout a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid #e57f25;
}

.pdetail-callout a:hover,
.pdetail-callout a:focus-visible {
    color: #e57f25;
    outline: none;
}

/* ---------- breakdown: inline body images ----------
   Used inside projects/content/<slug>.php, where each project's body copy is
   hand-written HTML. Base class is .pdetail-figure; add a modifier to change the
   layout. .is-wide breaks out of the 812px text column using negative margins,
   so it needs the 991px override below to stop overflowing on narrow screens. */
.pdetail-figure {
    margin: 26px 0;
}

.pdetail-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.pdetail-figure figcaption {
    font-size: 13px;
    line-height: 1.6;
    color: #6d7780;
    margin-top: 9px;
}

.pdetail-figure.is-left,
.pdetail-figure.is-right {
    width: 46%;
    margin-top: 6px;
}

.pdetail-figure.is-left {
    float: left;
    margin-right: 28px;
}

.pdetail-figure.is-right {
    float: right;
    margin-left: 28px;
}

/* Keeps a following h2 from riding up alongside a floated figure. */
.pdetail-body h2 {
    clear: both;
}

.pdetail-figure.is-wide {
    margin-left: -84px;
    margin-right: -84px;
}

.pdetail-figure-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 26px 0;
}

.pdetail-figure-pair .pdetail-figure {
    margin: 0;
}

.pdetail-figure-pair > img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- breakdown: services used band ---------- */
.pdetail-used {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px;
    border-top: 1px solid #e4e7ea;
    margin-top: 44px;
    padding-top: 34px;
}

.pdetail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.pdetail-chips a {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #032540;
    text-decoration: none;
    border: 1px solid #d8dee3;
    padding: 10px 16px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pdetail-chips a:hover,
.pdetail-chips a:focus-visible {
    border-color: #e57f25;
    color: #e57f25;
    outline: none;
}

/* ---------- breakdown: photo grid ---------- */
.pdetail-photos {
    padding: 44px 0 60px;
}

.pdetail-photos h2 {
    font-family: "Montserrat", sans-serif;
    color: #032540;
    font-size: 23px;
    margin: 0 0 20px;
}

.pdetail-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.pdetail-photo-grid img {
    display: block;
    width: 100%;
    height: 212px;
    object-fit: cover;
}

/* ---------- responsive ----------
   NOTE: style.css has exactly one breakpoint (1100px / 1099px). The 991px and
   767px breakpoints below are new and apply ONLY to the projects components in
   this file. Don't assume they are site-wide. */

/* Below 1100px style.css gives every .content block `padding: 60px 20px`, and
   that 20px is the ONLY thing keeping body text off the screen edge — .container
   goes to width:100% with no padding of its own. .pdetail-hero, .pdetail-body
   and .pdetail-photos each set their own vertical padding, which overrode the
   shorthand and took the 20px with it, so the text ran edge to edge on phones.
   Restore it here. If you add another .content block to this page, give it side
   padding at this breakpoint too. */
@media (max-width: 1099px) {
    .pdetail-hero {
        padding: 56px 20px 52px;
    }

    .pdetail-body {
        padding: 44px 20px 10px;
    }

    .pdetail-photos {
        padding: 36px 20px 48px;
    }

    /* Not a .content block, so it never had the padding — it is full-bleed on
       purpose. The cells carry their own inner padding. */
    .pdetail-specs {
        padding: 0;
    }
}

@media (max-width: 991px) {
    .pcard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Overrides --spec-cols from project.php. An odd number of specs would leave
       the second column of the last row empty, showing the container background
       as a grey block, so a lone trailing cell spans both columns instead. */
    .pdetail-specs .container {
        grid-template-columns: repeat(2, 1fr);
    }

    .pdetail-spec:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .pdetail-hero h1 {
        font-size: 32px;
    }

    /* Text column is no longer 812px wide here, so the breakout has nothing to
       break out into — it would just overflow the viewport. */
    .pdetail-figure.is-wide {
        margin-left: 0;
        margin-right: 0;
    }
}

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

    .pdetail-specs .container {
        grid-template-columns: 1fr;
    }

    /* Single column here, so the grid gap already draws the horizontal dividers. */
    .pdetail-spec {
        padding: 20px 18px 22px;
    }

    .pdetail-callout {
        padding: 24px 22px 26px;
    }

    .pdetail-highlights {
        padding: 22px 18px 24px;
    }

    /* One image per row on phones. Two columns left each photo about 150px wide,
       and the fixed 212px height meant object-fit: cover cropped the sides off
       anything wide — logos lost their first and last letters. Full width plus
       height:auto shows each image whole at its own aspect ratio, so the row of
       thumbnails becomes a readable stack. */
    .pdetail-photo-grid {
        grid-template-columns: 1fr;
    }

    .pdetail-photo-grid img {
        height: auto;
        object-fit: contain;
    }

    .pdetail-hero h1 {
        font-size: 27px;
    }

    .pcard-intro h2 {
        font-size: 25px;
    }

    /* Floated body images get too narrow to read next to text on phones. */
    .pdetail-figure.is-left,
    .pdetail-figure.is-right {
        float: none;
        width: 100%;
        margin: 26px 0;
    }

    .pdetail-figure-pair {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcard,
    .p-btn,
    .pdetail-chips a {
        transition: none;
    }
}