/* home page (home.html): additions on top of stylesHome.css; the cards come from styles1.css */


/* first view (wide screens, banners in one row): the hero takes the height left over so the
   four banners are fully visible with some space below them; the numbers row starts below the fold.
   24.9em = header, banner row and about 1.5em of space left below the banners. */
.hp #banner { margin-top: 0; }
.hp .heroContent { width: min(26.3em, 100%); }
@media only screen and (min-width: 1101px) {
    .hp #banner {
        min-height: max(22em, calc(100vh - 24.9em));
        min-height: max(22em, calc(100svh - 24.9em));
        padding-top: 3.5em;
        padding-bottom: 5.2em;
    }
    .hp .hp-stats { margin-top: 5em; }
}

/* sections */
.hp-section { width: min(1500px, calc(100% - 4em)); margin: 3.6em auto 0; color: rgb(214, 216, 218); }
.hp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding-bottom: 0.45em; margin-bottom: 0.9em; border-bottom: 1px solid rgb(110, 114, 118); }
.hp-head h2 { margin: 0; font-size: 1.45em; font-weight: 600; color: #fff; }
a.hp-more, a.hp-more:visited { color: rgb(142, 213, 182); font-weight: 600; white-space: nowrap; font-size: 0.95em; }

/* numbers */
.hp-stats { margin-top: 2.4em; }
.hp-statlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid rgb(90, 94, 98); border-radius: 3px; background: rgb(50, 53, 56); overflow: hidden; }
.hp-statlist li + li { border-left: 1px solid rgb(90, 94, 98); }
.hp-statlist a, .hp-statlist a:visited { display: flex; flex-direction: column; gap: 0.15em; padding: 1em 1.2em 1.1em; color: rgb(190, 194, 197); text-decoration: none; height: 100%; transition: background-color 0.2s ease; }
.hp-statlist a:hover { background: rgb(64, 68, 72); color: #fff; }
.hp-statlist a:hover span { text-decoration: underline; }
.hp-statlist b { font-size: 1.9em; font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hp-statlist span { font-size: 0.9em; }

/* card rows: six specimen cards / six key cards, like the galleries elsewhere */
.hp-gal.Gal { padding-bottom: 0; color: inherit; }
.hp-gal .keyCube { width: calc(15.666% - 1px); margin: 0 0.5% 1em; }

/* two columns: image of the day | guides + about */
.hp-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.4em; }
.hp-side { display: flex; flex-direction: column; gap: 2.2em; }

/* image of the day */
.hp-featcard, .hp-featcard:visited { position: relative; display: block; overflow: hidden; border: 1px solid rgb(110, 114, 118); border-radius: 3px; background: rgb(30, 32, 35); color: #fff; text-decoration: none; }
.hp-featcard img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hp-featcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3em 1.1em 0.9em; background: linear-gradient(to bottom, rgba(20, 22, 24, 0), rgba(20, 22, 24, 0.75) 35%, rgba(20, 22, 24, 0.92)); transition: background-color 0.2s ease; }
.hp-featcap b { display: block; font-size: 1.3em; font-weight: 600; color: #fff; }
.hp-featcap span { display: block; font-size: 0.9em; color: rgb(205, 208, 210); margin-top: 0.15em; }
.hp-featcard:hover { text-decoration: none; }
.hp-featcard:hover .hp-featcap { background-color: rgba(20, 22, 24, 0.35); }
.hp-featcard:hover .hp-featcap b { text-decoration: underline; }

/* guide */
.hp-guide, .hp-guide:visited { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 1.1em; align-items: center; padding: 0.7em; color: rgb(214, 216, 218); background: rgb(52, 55, 58); border: 1px solid rgb(90, 94, 98); border-radius: 3px; text-decoration: none; transition: background-color 0.2s ease; }
.hp-guide:hover { background: rgb(66, 70, 74); text-decoration: none; }
.hp-guide:hover b { text-decoration: underline; }
.hp-guide img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; background: rgb(70, 74, 78); }
.hp-guide b { display: block; color: #fff; font-size: 1.15em; font-weight: 600; margin-bottom: 0.3em; }
.hp-guide > span > span { display: block; line-height: 1.5; color: rgb(214, 216, 218); }

/* about */
.hp-about p { line-height: 1.6; margin: 0 0 0.8em; }
.hp-muted { color: rgb(170, 174, 177); }
.hp-aboutlinks { display: flex; gap: 1.4em; padding-top: 0.6em; border-top: 1px solid rgb(90, 94, 98); }
.hp-aboutlinks a, .hp-aboutlinks a:visited { color: rgb(142, 213, 182); font-weight: 600; }

.hp .homeFooter { width: min(1500px, calc(100% - 4em)); }

@media only screen and (max-width: 1200px) {
    .hp-gal .keyCube { width: calc(32.333% - 1px); }
}
@media only screen and (max-width: 1100px) {
    .hp-section, .hp .homeFooter { width: min(100% - 2em, 1100px); }
    .hp-two { grid-template-columns: 1fr; gap: 2.6em; }
}
@media only screen and (max-width: 720px) {
    .hp #banner { min-height: 29em; padding: 4.5em 1em 4em; }
    .hp-section { margin-top: 2.6em; }
    .hp-statlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-statlist li:nth-child(n) { border-left: 0; border-top: 1px solid rgb(90, 94, 98); }
    .hp-statlist li:nth-child(-n + 2) { border-top: 0; }
    .hp-statlist li:nth-child(even) { border-left: 1px solid rgb(90, 94, 98); }
    .hp-statlist li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .hp-statlist a { padding: 0.8em 0.9em; }
    .hp-statlist b { font-size: 1.5em; }
    .hp-head h2 { font-size: 1.25em; }
    .hp-guide { grid-template-columns: 6em minmax(0, 1fr); }
}
@media only screen and (max-width: 600px) {
    .hp-gal .keyCube { width: calc(49% - 1px); }
}
@media only screen and (max-width: 480px) {
    .hp-section, .hp .homeFooter { width: calc(100% - 1.2em); }
}

/* hero search: the shared search style (styles1.css) instead of the taller one in stylesHome.css */
.hp #search { height: 34px; padding: 0 0.7em; font-size: 15px; color: rgb(224, 224, 224); background: rgb(30, 32, 35); border: 1px solid rgb(90, 92, 96); border-right: 0; border-radius: 3px 0 0 3px; }
.hp #search::placeholder { color: rgb(140, 140, 140); }
.hp #search:focus { border-color: rgb(142, 213, 182); }
.hp #searchButton { flex: 0 0 36px; min-width: 36px; height: 34px; background: rgb(142, 213, 182) url(/img/search.png) center / 18px no-repeat; border: 1px solid rgb(142, 213, 182); border-radius: 0 3px 3px 0; }
.hp #searchButton:hover { background-color: rgb(157, 222, 194); }