/* Homepage (guest view) hero and action cards. Loaded after webhost.css and webhost-dark.css.
   webhost.css itself is never modified - everything the homepage needs is added or re-pointed
   here.

   WHY THE GRID
   The Transfer card has to sit under the TLD select + Search button and be exactly their width.
   Hard-coding a pixel width does not work, because the button label is translated ("Search" vs
   "Rechercher"), so its width differs by language. Instead the search row and the row below it
   share ONE grid, and .osir-search is set to `display: contents` so its three children become
   grid items. The column widths are then shared for real, and the alignment holds in any
   language. The three controls keep their markup, classes and ids - only the form's box changes. */

/* The hero is the one large surface on the page, so it carries the strongest elevation of the
   three. Without this the card sits on a grey page looking like a flat shape rather than a raised
   one, now that --osir-surface is off-white rather than pure white. */
.osir-hero {
    box-shadow: var(--osir-shadow-lg);
}

.osir-hero-grid {
    display: grid;
    /* Fixed tracks keep the layout pixel-identical in every language. "Rechercher" is the
       widest button label the site ships (~114px), so 140px is a safe fixed width. With `auto`
       the button track grew for longer labels, widening .osir-side and shrinking the 1fr input
       column on every language switch. */
    grid-template-columns: minmax(0, 1fr) 130px 140px;
    column-gap: 8px; /* matches the .osir-search gap */
    row-gap: 16px;
    align-items: start;
}

.osir-hero-grid > .osir-search { display: contents; }

/* The input is a grid item now, not a flex item, so it needs min-width: 0 to be allowed to
   shrink below its intrinsic size. */
.osir-hero-grid > .osir-search > .form-control { min-width: 0; }

/* The price list is also the TLD picker. webhost.css already draws .osir-price as a pill, so these
   rules only add what a <button> needs on top of that: it is a real button for the script to bind
   and for keyboards and screen readers to announce, without changing how the pill looks. */
.osir-price {
    font: inherit;
    font-family: var(--osir-mono);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.osir-price:hover { border-color: var(--osir-violet-200); background: var(--osir-violet-25); }

.osir-price:focus-visible {
    outline: 2px solid var(--osir-violet-600);
    outline-offset: 2px;
}

/* The TLD currently selected in the search form. webhost.css sets .osir-price b to ink-900, so the
   price needs its own colour to stay legible on the violet fill. The selection is marked by the
   fill, a 2px inner ring and bolder type. The ring is an inset box-shadow rather than a thicker
   border on purpose: it reads as a bold border but adds no width, so nothing reflows when a
   different TLD is picked. */
.osir-price.active {
    background: var(--osir-violet-600);
    border-color: var(--osir-violet-600);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 0 0 2px #fff;
}

.osir-price.active b { color: #fff; }

/* Everything below the search row is placed by column only and left to auto-flow. */
.osir-hero-grid > .osir-prices {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 8px;
    margin-top: 0; /* the grid row-gap handles the spacing now */
}

/* The right-hand column: the Transfer card with the "included with every domain" list stacked
   directly beneath it. They are one grid item on purpose. A grid row is as tall as its tallest
   item, and the tallest thing in this row is the price list on the left - so a separate row would
   have started below the whole price list instead of just below the Transfer card. Keeping them in
   one item holds them together at the top of the column. */
.osir-hero-grid > .osir-side {
    grid-column: 2 / 4;
    /* This item spans the fixed 130px track and the auto one. Without min-width: 0 its min-content
       floor is fed back into track sizing, which widens the whole grid: the 1fr input column grows
       and more price pills fit per row. Same reason .form-control above needs it. */
    min-width: 0;
    display: grid;
    gap: 12px;
    align-content: start;
}

/* Once a result exists, #hs-domain-results takes the row under the search controls and pushes the
   price list down one row. This card is taller than either, so it has to span both of those rows to
   stay alongside them - otherwise it would be pushed below the price list. Gated on the results box
   actually being shown: while it is [hidden] it is not a grid item at all, and an unconditional
   span would open an empty third row and add dead space under the card before the first search. */
.osir-hero-grid:has(> #hs-domain-results:not([hidden])) > .osir-side {
    grid-row: 2 / 4;
}

/* What comes with every domain. Four tight rows come to roughly the height of three rows of price
   pills. The height is left to the content rather than fixed, because these labels are translated
   and a hard height would clip them in French. */
.osir-includes {
    margin: 0;
    padding: 0;
    min-width: 0;
    list-style: none;
    display: grid;
    gap: 4px;
    align-content: start;
    font-size: 12.5px;
    color: var(--osir-ink-700);
}

.osir-include {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    line-height: 1.35;
}

.osir-include span { min-width: 0; }

/* .icon is sized and stroked by huraga.css (stroke: currentColor), so the colour is set on the
   element itself rather than by overriding stroke. */
.osir-include .icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--osir-violet-600);
}

/* Live availability results (assets/js/portal.js). The row is column 1 only, so it lines up with
   the input and the price list above and below it rather than stretching under the Transfer card.
   It sits in the markup right after the form, so auto-placement gives it the row between the
   search controls and the prices. The margin is dropped because the grid row-gap already spaces
   these rows; the box's own padding provides the inset. */
.osir-hero-grid > #hs-domain-results {
    grid-column: 1;
    margin-top: 0;
}

/* Hosting plans, read from the live catalogue. Same card language as .osir-link below, so the
   homepage reads as one set of surfaces rather than a widget bolted on. */
.osir-plans-section {
    margin-bottom: 18px;
}

.osir-plans-section h2 {
    font-size: 24px;
    letter-spacing: -.02em;
    margin: 6px 0 6px;
}

.osir-plans-section p {
    color: var(--osir-ink-500);
    margin-bottom: 16px;
    max-width: 620px;
}

.osir-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.osir-plan {
    display: flex;
    flex-direction: column;
    background: var(--osir-surface);
    border: 1px solid var(--osir-line);
    border-radius: 14px;
    padding: 20px;
    color: var(--osir-ink-700);
    text-decoration: none;
    box-shadow: var(--osir-shadow-sm);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.osir-plan:hover {
    border-color: var(--osir-violet-200);
    background: var(--osir-violet-25);
    box-shadow: var(--osir-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--osir-ink-700);
}

.osir-plan:focus-visible {
    outline: 2px solid var(--osir-violet-600);
    outline-offset: 3px;
}

.osir-plan__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--osir-ink-900);
}

/* The price is the reason the card exists, so it is the largest thing on it and in the mono face
   used for every other machine-read number in this theme. */
.osir-plan__price {
    font-family: var(--osir-mono);
    font-size: 26px;
    line-height: 1.1;
    color: var(--osir-ink-900);
    margin: 12px 0 0;
}

.osir-plan__period,
.osir-plan__yearly {
    font-size: 12.5px;
    color: var(--osir-ink-500);
}

.osir-plan__period { margin-top: 2px; }
.osir-plan__yearly { margin-top: 4px; }

/* What each plan includes. The check glyph comes from the shared icon sprite, so it inherits the
   theme's stroke colour and needs no font or image of its own. */
.osir-plan__features {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 7px;
    font-size: 13px;
    color: var(--osir-ink-700);
}

.osir-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    line-height: 1.35;
}

.osir-plan__features span { min-width: 0; }

.osir-plan__features .icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    color: var(--osir-violet-600);
}

/* The whole card is the link, so this is a styled span rather than a nested button - nesting a
   real control inside the anchor would be invalid and would double up the tab stop. Pushed to the
   bottom with auto margin so the buttons line up across cards of differing feature counts. */
.osir-plan__cta {
    margin-top: auto;
    padding-top: 18px;
    font-family: var(--osir-mono);
    font-size: 12px;
    color: var(--osir-violet-700);
}

.osir-plan__cta::after {
    content: ' →';
}

/* With three plans, the middle one is the conventional pick to emphasise. It is targeted by
   position rather than by name so renaming or reordering the catalogue does not silently move it,
   and it is a tint only - no "popular" claim is made that the catalogue does not support. */
.osir-plans > .osir-plan:nth-child(2) {
    border-color: var(--osir-violet-200);
    background: var(--osir-violet-25);
    box-shadow: var(--osir-shadow-md);
}

/* The action cards sit in one horizontal row, with "New here" in the middle. auto-fit keeps it
   correct when the Knowledge base is disabled and only two cards remain. */
.osir-links {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: center;
}

/* "New here" is popped out: raised above the row, with the violet accent and the strongest shadow
   of the three so the eye lands on the primary action first. */
.osir-link--new {
    position: relative;
    z-index: 1;
    transform: translateY(-10px);
    padding: 24px 18px;
    background: var(--osir-violet-25);
    border-color: var(--osir-violet-200);
    box-shadow: var(--osir-shadow-lg);
}

.osir-link--new strong { font-size: 16px; }

/* Small screens: stack everything. Sharing columns would otherwise squeeze the three search
   controls into unusable widths. */
@media (max-width: 767.98px) {
    .osir-hero-grid {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    .osir-hero-grid > .osir-search > *,
    .osir-hero-grid > .osir-prices,
    .osir-hero-grid > .osir-side,
    .osir-hero-grid > #hs-domain-results,
    .osir-hero-grid:has(> #hs-domain-results:not([hidden])) > .osir-side {
        grid-column: 1;
        grid-row: auto;
    }

    .osir-links {
        grid-template-columns: 1fr;
        row-gap: 22px;
    }

    .osir-plans {
        grid-template-columns: 1fr;
    }

    .osir-link--new { transform: none; }
}