/* Odoardo Space™ — family (profession) landing pages.
   The page borrows its architecture from the product pages: the hero, the strategy triptych, the
   portfolio grid, the pricing section and the closing partials all come from product.css and
   space.css. What lives here is only what those two do not carry — the opening essay, the sieve
   over a family of several hundred addresses, and the junction to the neighbouring families. */

/* #region Opening essay */
/* The family's own argument, set as an editorial spread: a fixed narrow column on the left carrying
   the eyebrow and one line worth remembering, the prose on the right at a reading measure. */
/* THREE CLAIMS, SIDE BY SIDE, each under a hairline. The three arguing one thing is what
   they are, and standing one under another at 62ch they read as an essay: the section looked heavier
   than the two that actually sell around it. auto-fit rather than a fixed three, because a family may
   be written with two paragraphs or four and the row should not care.
   Nothing sticky here, and no pull quote: an aside here carries a sentence that goes in a circle, and the
   heading above says the principle in four words. */
.space-family-essay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: clamp(1.8rem, 3.5vw, 3.25rem);
    align-items: start;
}

    .space-family-essay-grid p {
        margin: 0;
        padding-top: clamp(1.1rem, 2vw, 1.5rem);
        border-top: 1px solid var(--hairline);
        /* The site's ordinary reading size — the one .explore-intro sets. It ran a step larger and a
           shade brighter, which is how a supporting paragraph came to look like a lead. */
        color: var(--text-muted);
        font-size: clamp(1rem, 1.05vw, 1.05rem);
        font-weight: 300;
        line-height: 1.75;
    }

    /* Emphasis inside a claim, in full white against the muted paragraph — the paragraphs are written
       in the translations and any of them may bold a phrase. Gold is kept for the heading's italic. */
    .space-family-essay-grid p b {
        color: var(--white);
        font-weight: 400;
    }
/* #endregion */

/* #region Catalogue */
/* The extension is the quiet half of an address: the name is what a visitor reads, ".pl" only says
   where it lives. It also stops a column of names from reading as one grey block.
   It carries one weight more than the name beside it, so the muted tone reads quieter rather than
   starved. Gold arrives on the extension when the row is pointed at. */
.space-family-tld {
    color: rgba(245, 245, 245, .5);
    font-style: normal;
    font-weight: 300;
    transition: color var(--motion-quick) var(--ease-house);
}

.domain-grid li a:hover .space-family-tld,
.domain-grid li a:focus-visible .space-family-tld {
    color: var(--gold);
}

.domain-grid li a.is-taken .space-family-tld {
    opacity: .8;
}

/* The button that opens the wizard on one address. It sits quiet until the row is pointed at, so a
   ladder of several hundred names is a list and not a wall of arrows — but it keeps its place in the
   tab order and appears the moment it is focused, and it is always visible where there is no hover
   to reveal it. */
.space-family-choose {
    margin-left: .5rem;
    padding: 6px;
    border: 0;
    background: none;
    color: var(--gold);
    font-size: .85rem;
    line-height: 1;
    opacity: 0;
    transition: opacity .3s var(--ease-house), transform .3s var(--ease-house);
}

.space-family-grid li:hover .space-family-choose,
.space-family-choose:focus-visible {
    opacity: 1;
}

.space-family-choose:hover {
    transform: translateX(3px);
}

@media (hover: none) {
    .space-family-choose {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .space-family-choose {
        transition: none;
    }

        .space-family-choose:hover {
            transform: none;
        }
}
/* #endregion */

/* #region Neighbouring families */
.space-family-siblings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1rem, 1.6vw, 1.6rem);
}

.space-family-sibling {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    min-height: 9rem;
    padding: clamp(1.5rem, 2.2vw, 2.2rem);
    border: 1px solid var(--hairline);
    background: linear-gradient(145deg, var(--tint), transparent 52%), var(--surface-card);
    text-decoration: none;
    transition: border-color var(--motion) var(--ease-house);
}

    /* The card does not lift: gold arrives on its edge. */
    .space-family-sibling:hover,
    .space-family-sibling:focus-visible {
        border-color: var(--gold-accent);
    }

.space-family-sibling-name {
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 300;
    line-height: 1.3;
}

.space-family-sibling-meta {
    margin-top: auto;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* The door back to the whole portfolio is one of the cards, and reads as the last of them. */
.space-family-sibling-all {
    border-color: var(--hairline-mid);
}

    .space-family-sibling-all:hover .space-family-sibling-name,
    .space-family-sibling-all:focus-visible .space-family-sibling-name {
        color: var(--gold);
    }
/* #endregion */

/* #region Responsive */
/* The essay grid needs no breakpoint any more: auto-fit collapses it to one column when the columns
   would be narrower than a paragraph wants, and there is no sticky aside left to unstick. */

@media (prefers-reduced-motion: reduce) {
    .space-family-sibling,
    .space-family-tld {
        transition: none;
    }
}
/* #endregion */