/* How the home page arranges the application's components (components.css). */

/* --- Hero: the product's landing page: banner and card side by side -------------- */

.home-hero__top { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: stretch; }
.seeas.login-section { display: flex; flex-direction: column; padding: 1.5rem; }
.seeas .login-section__title { margin-bottom: 0.25rem; font-size: 1.375rem; }
.seeas__lead { margin-bottom: 0.75rem; color: var(--brand-muted); font-size: 0.875rem; }
.seeas__btn { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.5rem; border-radius: 12px; transition: background-color 0.15s; }
.seeas__btn:hover { background: var(--brand-subtle); }
.seeas__btn[aria-pressed="true"] { background: var(--brand-tint); }
.seeas__tick { flex: none; width: 1.25rem; height: 1.25rem; margin-left: auto; color: rgb(var(--color-primary-base)); visibility: hidden; }
.seeas__btn[aria-pressed="true"] .seeas__tick { visibility: visible; }
.seeas ul { display: grid; flex: 1; align-content: space-between; gap: 0.125rem; }

.home-hero__view { margin-top: 1rem; }
.hero__screens { display: grid; }
.hero__screen { grid-area: 1 / 1; opacity: 0; transition: opacity 0.18s linear; }
.hero__screen.is-active { opacity: 1; }
@media (max-width: 1000px) { .home-hero__top { grid-template-columns: 1fr; } }

/* --- The week: "Up next" rows beside the screen -------------------------------------- */

.week { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; align-items: start; }
.week__row { align-items: center; }
.week__item.is-open .week__row { background: var(--brand-tint); }
.week__detail { padding: 0.5rem 0 0.75rem; color: var(--brand-text); font-size: 0.875rem; line-height: 1.5; }
.js .week__item:not(.is-open) .week__detail { display: none; }
.week__stage { position: sticky; top: calc(var(--brand-topbar-height) + 1rem); display: grid; aspect-ratio: 1440 / 900; }
html:not(.js) .week__stage { display: none; }
.week__shot { grid-area: 1 / 1; align-self: start; visibility: hidden; }
.week__shot.is-active { visibility: visible; }
.week__shot.shot--phone { justify-self: center; height: 100%; aspect-ratio: 390 / 844; }
.week__inline { display: none; margin-top: 0.75rem; }
html:not(.js) .week__inline { display: block; }
@media (max-width: 900px) {
    .week { grid-template-columns: 1fr; }
    .week__stage { display: none; }
    .week__inline { display: block; }
    .week__inline.shot--phone { width: min(70%, 280px); }
}
/* Without scripts there is no stage, so each line shows its text and screen side by side. */
@media (min-width: 901px) {
    html:not(.js) .week { grid-template-columns: 1fr; }
    html:not(.js) .week__detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem; align-items: start; padding: 0.5rem 0.5rem 1.25rem; }
    html:not(.js) .week__inline { margin-top: 0; }
    html:not(.js) .week__inline.shot--phone { justify-self: center; width: min(70%, 280px); }
}

/* --- What's included: tiles ------------------------------------------------------------ */

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 0.75rem; }
.included .brand-tile h3 { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-right: 0; }
.included .brand-tile > div { flex: 1; min-width: 0; }

/* --- The tour ---------------------------------------------------------------------------- */

.video-card { position: relative; display: block; width: 100%; overflow: hidden; border: 1px solid var(--brand-border); border-radius: 18px; background: var(--brand-nav-deep); box-shadow: var(--brand-shadow-md); }
.video-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-card__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.video-card.is-previewing .video-card__preview { opacity: 1; }
.video-card__tag { position: absolute; left: 0.875rem; bottom: 0.875rem; }
.video-card:hover .video-card__tag { background: rgb(var(--color-primary-gradient)); }
.tour-card { justify-content: center; }

/* --- Sign-in, roles and privacy -------------------------------------------------------------- */

.trust-row { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.625rem 0; }
.trust-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.trust-list > li:nth-child(2) { border-top: 0; }
@media (max-width: 760px) {
    .trust-list { grid-template-columns: 1fr; }
    .trust-list > li:nth-child(2) { border-top: 1px solid var(--brand-border); }
}

/* --- FAQ --------------------------------------------------------------------------------------- */

.faq__list { padding-block: 0.25rem; }
.faq__item + .faq__item { border-top: 1px solid var(--brand-border); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-inline: -0.5rem; padding: 0.75rem 0.5rem; border-radius: 12px; color: var(--brand-ink); font-size: 0.9375rem; font-weight: 600; cursor: pointer; list-style: none; transition: background-color 0.15s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: var(--brand-subtle); }
.faq__chevron { flex: none; width: 1.25rem; height: 1.25rem; color: var(--brand-muted); transition: transform 0.15s; }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__answer { padding: 0 0 0.875rem; max-width: 72ch; color: var(--brand-text); font-size: 0.9375rem; }

/* --- Closing banner --------------------------------------------------------------------------------- */

.cta { margin-top: var(--section); }