/* Landing templates (templates/web/landing/*.html): front page and the kaffe / te / bolig
   category landings. Ported from the Tailwind markup in the legacy no_layout module,
   see docs/DESIGN.md "Homepage", "Other landing templates" and "Product box on landing pages".
   Loaded after noru.css; reuses .section-bar, .tiles, .home-showcase, .showcase, .seo-box, .button-alt. */

:root {
  --landing-box: #f3f4f6;        /* tw gray-100: blog/equipment boxes */
  --landing-label-dark: #374151; /* tw gray-700 */
  --landing-label-light: var(--primary-alt-text); /* tw yellow-50 */
}

/* --------------------------------------------------------------- headings */
.landing-title { text-align: center; margin: 0 0 1rem; }
.landing-intro { text-align: justify; padding: 0 2rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .landing-intro { padding: 0 8rem; } }

/* --------------------------------------------------------------- showcase */
.landing-showcase { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 768px) { .landing-showcase { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.home-showcase .showcase img, .landing-showcase .showcase img { width: 100%; }
.showcase:hover .showcase-label { text-decoration: none; }

/* label positions (base .showcase-label = bottom-left, .light = top-right) */
.showcase-label.top-left { top: 1.25rem; left: 1.25rem; right: auto; bottom: auto; }

/* label tones, all 2px border in the text colour */
.showcase-label.glass-dark { background: rgba(148, 163, 184, .3); color: var(--landing-label-dark); border-color: var(--landing-label-dark); }
.showcase-label.grey { background: rgba(156, 163, 175, .7); color: var(--landing-label-light); border-color: var(--landing-label-light); }
.showcase-label.pale { background: rgba(241, 245, 249, .6); color: var(--landing-label-dark); border-color: var(--landing-label-dark); }
.showcase-label.pale-light { background: rgba(241, 245, 249, .6); color: var(--landing-label-light); border-color: var(--landing-label-light); }

/* ------------------------------------------------------ front: tiles/logos */
.landing-tiles { padding: 0 .5rem; }
.tile span { display: block; text-align: center; }
.brand-logos a { display: block; margin: 0 .75rem; }
.brand-logos img { width: 100%; }
.all-brands { text-align: center; margin-top: .5rem; }
.all-brands a { text-transform: uppercase; }
.all-brands .icon { vertical-align: -.15em; }
.section-bar a { color: inherit; }

/* ------------------------------------------------ product boxes on landings */
.landing .card-link { display: flex; flex-direction: column; }
.landing .card-title { order: 1; font: 400 1.125rem/1.35 var(--serif); height: 2.7em; margin: .5rem 0 0; }
.landing .card-brand { order: 2; margin-top: .2rem; font-size: .875rem; color: var(--text); }
.landing .card-price .price { font-weight: 700; }
.landing .price-before { font-size: .875rem; }

/* ------------------------------------------------- blog / equipment row */
.landing-row { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0 2rem; }
@media (min-width: 768px) {
  .landing-row { flex-direction: row; gap: 1rem; }
  .landing-aside { flex: 0 0 calc((100% - 1rem) / 3); }
  .landing-main { flex: 1 1 0; min-width: 0; }
}
.landing-aside { background: var(--landing-box); padding: 1.25rem; }
.landing-aside.plain { background: none; }

.teaser { margin-bottom: 2rem; }
.teaser:last-child { margin-bottom: .75rem; }
.teaser img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.teaser h2 { margin: 20px 0 .5rem; }
.teaser hr { margin: 0 0 .5rem; border-top-color: var(--divider); }
.teaser-text { margin-bottom: 1rem; }
.landing .button-alt { display: inline-block; }

.section-bar.soft { background: var(--landing-box); margin: 0 0 .25rem; }
.landing-main > .section-bar.soft:first-child { margin-top: 0; }
.more-link { text-align: center; }
.more-link a { text-decoration: underline; }

.grid.side-grid { grid-template-columns: repeat(2, 1fr); margin-top: .5rem; }
@media (min-width: 576px) { .grid.side-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .grid.side-grid { margin-top: 1rem; } }

.aside-brands { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (min-width: 768px) { .aside-brands { gap: 1rem; } }
.aside-brands a { display: block; margin-bottom: 2rem; }
.aside-brands img { width: 100%; }

/* ---------------------------------------------------------------- seo box */
.seo-box h4 { margin-top: 20px; }
.seo-box .rte h2, .seo-box .rte h3, .seo-box .rte h4 { break-after: avoid; }
@media (max-width: 767px) { .seo-box { padding: 1.25rem; } }