/* ==========================================================================
   Property page — DESIGN B

   Kept in its own file, not bolted onto site.css: this is a candidate layout
   and it should be deletable in one move. Loaded only by
   Views/public/properties/show_alt.php.

   Counterpoint to design A:
     A = colour banner, then a gallery grid, then the detail.
     B = one photograph at full width with the title and price written over it,
         a band of figures, the detail, and the rest of the photographs held
         back until the reader wants them.
   Prefix: .pb-  — nothing here touches design A.
   ========================================================================== */

/* ------------------------------------------------------------------ hero --- */

.pb-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(68vh, 620px);
    /* Room for the price card to hang off the bottom edge. */
    margin-bottom: 46px;
    padding: 0 0 34px;
    background: #0a2531 center / cover no-repeat;
    isolation: isolate;
}

.pb-hero--none { min-height: 300px; }

/* A light wash only. The title and the price now carry their own backgrounds,
   so the scrim no longer has to be heavy enough for the worst photograph on
   the site — which is what was flattening all the good ones. */
.pb-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(6, 26, 35, .55) 0%, rgba(6, 26, 35, .18) 45%, rgba(6, 26, 35, .3) 100%);
}

/* Covers the whole hero so the photograph itself is the control. Everything
   above it re-enables its own pointer events. */
.pb-hero-open {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 0;
    padding: 0;
    background: none;
    cursor: zoom-in;
}

/* A column, so the gallery button sits under the title card rather than
   beside it — both are inline-level and were sharing a line. */
.pb-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
}
.pb-hero-inner a, .pb-hero-inner button { pointer-events: auto; }

/* The title on its own translucent panel. Blurred behind, so a busy
   photograph does not read through the words. */
.pb-titlecard {
    display: inline-block;
    max-width: 40rem;
    padding: 20px 26px 22px;
    border-radius: var(--tr-radius-lg);
    background: rgba(8, 30, 40, .55);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    color: #fff;
    pointer-events: auto;
}

.pb-titlecard h1 {
    margin: .55rem 0 0;
    color: #fff;
    font-size: clamp(1.5rem, 3.1vw, 2.5rem);
    line-height: 1.16;
}

.pb-place {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .7rem 0 0;
    color: rgba(255, 255, 255, .92);
    font-size: .95rem;
}

.pb-hero-gallery {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 18px;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--tr-ink);
    font-family: var(--tr-ui);
    font-size: .85rem;
    font-weight: 600;
}

.pb-hero-gallery:hover { background: #fff; color: var(--tr-blue-600); }

/* Solid white, which is the one thing guaranteed to read over any photograph,
   and hanging off the hero's bottom edge so the image and the content below
   are tied together rather than stacked. */
.pb-pricecard {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(calc(50% + 17px));
    min-width: 230px;
    padding: 16px 28px;
    border-radius: var(--tr-radius-lg);
    background: #fff;
    box-shadow: var(--tr-shadow-lg);
    text-align: center;
    pointer-events: auto;
}

.pb-pricecard b {
    display: block;
    font-family: var(--tr-display);
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 800;
    line-height: 1.1;
    background: var(--tr-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pb-pricecard span {
    display: block;
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px solid var(--tr-line);
    color: var(--tr-muted);
    font-size: .8rem;
}

/* ------------------------------------------------------------ facts card --- */

.pb-band { padding: 0 0 6px; background: #fff; }
.pb-crumbs { margin: 0 0 16px; }

/* One bordered card, icon over figure over label, divided into equal cells. */
.pb-facts {
    display: grid;
    /* Column flow, not row: with display:contents children the default row
       flow laid them out icon, value, icon, value along one line. Flowing by
       column puts every icon in row one and every value in row two, which is
       what lets a single rule separate them. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(120px, 1fr);
    grid-template-rows: auto auto;
    margin: 0;
    padding: 0;
    background: #fff;
    /* Raised like the cards below it rather than outlined, so the whole column
       reads as one set of panels. */
    box-shadow: var(--tr-shadow);
    border-radius: var(--tr-radius-lg);
}

/* Not a cell itself — its two children are, which is what lets the icons share
   one row and the values another. */
.pb-fact { display: contents; }

.pb-fact-icon {
    display: flex;
    justify-content: center;
    padding: 20px 10px 12px;
    color: var(--tr-ink-700);
}

/* The rule runs between the two rows, the width of the card, instead of a
   grid of boxes. Each value cell draws its own segment and they join up. */
.pb-fact-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: 0 10px 20px;
    border-top: 1px solid var(--tr-line);
    text-align: center;
}

.pb-fact-value dd {
    margin: 14px 0 0;
    font-family: var(--tr-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--tr-ink);
}

.pb-fact-value dt {
    margin: 0;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tr-muted);
}

/* ---------------------------------------------------------------- detail --- */

.pb-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, .95fr); gap: 50px; align-items: start; }

/* Each section sits in its own `.pb-card`, so the cards are spaced apart here
   rather than by a margin on the block inside them — a margin in there would
   fall inside the card's padding and leave the cards themselves touching. */
.pb-main { display: grid; gap: 20px; align-content: start; }

/* `.pb-block` is only a grouping element now: the card around it draws the
   panel and supplies the padding, so the block adds nothing but the gap
   between its heading and its body. */
.pb-block > h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .9rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.pb-block h2 small {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--tr-mist);
    color: var(--tr-blue-600);
    font-size: .72rem;
    font-weight: 700;
}

.pb-block > :not(h2) + :not(h2) { margin-top: 1rem; }
/* .tr-prose carries a 40px top margin for use on a plain page; inside a
   card that lands on top of the card's own padding as a band of empty
   white above the first line. */
.pb-block > :first-child { margin-top: 0; }

.pb-highlights { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; }
.pb-highlights li {
    padding: .32rem .8rem;
    border-radius: 999px;
    background: var(--tr-brand-gradient);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
}

.pb-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .5rem 1.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pb-features li { display: flex; align-items: flex-start; gap: .5rem; font-size: .93rem; line-height: 1.5; }
.pb-features svg { flex: 0 0 auto; margin-top: .25rem; color: var(--tr-teal); }

/* Two columns of label/value on a wide screen, one on a narrow one. */
.pb-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 2.5rem; margin: 0; }
.pb-spec > div:last-child, .pb-spec > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.pb-spec > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--tr-line);
}
.pb-spec dt { margin: 0; color: var(--tr-muted); font-size: .89rem; }
.pb-spec dd { margin: 0; font-weight: 600; font-size: .93rem; text-align: right; }

.pb-side { position: sticky; top: 20px; }
.pb-card {
    padding: 22px;
    border-radius: var(--tr-radius-lg);
    background: #fff;
    box-shadow: var(--tr-shadow);
}
.pb-card > h2 { margin: 0 0 .3rem; font-size: 1.1rem; }

/* --------------------------------------------------------------- gallery --- */

.pb-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.pb-shot {
    position: relative;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: var(--tr-radius);
    overflow: hidden;
    background: var(--tr-mist);
    cursor: zoom-in;
}
.pb-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pb-shot:hover img { transform: scale(1.05); }

/* The first tile takes two columns and two rows, so the grid has a focal
   point instead of reading as a contact sheet. */
.pb-gallery .pb-shot:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

.pb-map { width: 100%; height: 380px; border: 0; border-radius: var(--tr-radius-lg); }

/* ------------------------------------------------------------- narrower --- */

@media (max-width: 900px) {
    /* The single rule between the rows only works while every fact shares one
       line. Once they wrap, each fact becomes its own stacked cell — without
       resetting the flow, grid kept adding columns and the card ran off the
       side of the screen. */
    .pb-facts {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: none;
    }

    .pb-fact { display: flex; flex-direction: column; align-items: center; }
    .pb-fact-icon { padding: 16px 10px 6px; }
    .pb-fact-value { border-top: 0; padding: 0 10px 16px; }
    .pb-fact-value dd { margin-top: 0; }
}

@media (max-width: 980px) {
    .pb-grid { grid-template-columns: 1fr; gap: 30px; }
    .pb-side { position: static; }
    .pb-hero { min-height: min(56vh, 420px); margin-bottom: 30px; }
    .pb-titlecard { padding: 16px 18px 18px; }

    /* Centred under the hero rather than hanging off its corner, where on a
       narrow screen it would cover most of the photograph. */
    .pb-pricecard {
        position: static;
        transform: none;
        display: block;
        margin: 18px 0 0;
        min-width: 0;
    }

    /* A feature tile that spans two of three columns leaves an awkward gap
       once the grid gets this narrow. */
    .pb-gallery .pb-shot:first-child { grid-column: span 1; grid-row: span 1; aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
    .pb-facts { grid-template-columns: repeat(2, 1fr); }
    /* An odd number of facts would otherwise leave the last one alone in
       the left column with a hole beside it: let it take the whole row. */
    .pb-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .pb-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
}