/* ==========================================================================
   IceFighter design 2: the club landing pages (include/if2.verein.inc.php,
   templates/sf/if2/verein.php). Public frame of css/if2-public.css, the old
   article in one card, registration on the right as on the feature page.
   Everything uses the ifv- prefix.
   ========================================================================== */

.ifp-hero--verein { --ifp-hero-h: 178px; }
.ifp-hero--verein .ifp-hero__img { left: 38%; }
.ifp-hero--verein::before { background: linear-gradient(90deg, var(--if-frost) 0%, rgba(238, 244, 250, .96) 38%, rgba(238, 244, 250, .45) 50%, rgba(238, 244, 250, 0) 62%); }
.ifp-hero--verein .ifp-hero__title { max-width: 820px; font-size: 56px; line-height: 1; }
.ifv-kicker { display: block; margin-bottom: 10px; font: 700 18px/1 var(--if-font-head); font-style: normal; letter-spacing: .05em; color: var(--if-eisblau-dark); }

.ifv { display: grid; grid-template-columns: minmax(0, 900px) 357px; justify-content: space-between; gap: 40px; align-items: start; padding-top: 26px; max-width: 1440px; padding-left: 72px; padding-right: 68px; }
.ifv-article { padding: 30px 40px 32px !important; }

/* sections of the old boxes */
.ifv-sec { padding: 0 0 26px; }
.ifv-sec + .ifv-sec { padding-top: 26px; border-top: 1px solid var(--if-line); }
.ifv-sec:last-of-type { padding-bottom: 6px; }
.ifp .ifv-sec__title { position: relative; margin: 0 0 18px; padding-bottom: 10px; font: 700 28px/1.05 var(--if-font-head); text-transform: uppercase; letter-spacing: .01em; color: var(--if-navy); }
.ifp h3.ifv-sec__title { font-size: 23px; }
.ifv-sec__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; background: var(--if-red); }
.ifv-sec p { margin: 0 0 1em; font-size: 16px; line-height: 1.65; color: #2B3B57; }
.ifv-sec p:last-child { margin-bottom: 0; }
.ifv-sec .ifv-lead { font-size: 18px; line-height: 1.6; color: var(--if-navy); }
.ifv-sec a { font-weight: 600; color: var(--if-eisblau-dark); text-decoration: underline; text-decoration-color: rgba(30, 134, 192, .4); text-underline-offset: 3px; }
.ifv-sec a:hover { color: var(--if-navy); text-decoration-color: var(--if-red); }

/* picture of the club website with the caption of the old page */
.ifv-fig { margin: 22px 0 24px; text-align: center; }
.ifv-fig img { display: inline-block; max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--if-line), var(--if-shadow-l); }
.ifv-fig figcaption { margin: 14px auto 0; max-width: 560px; font-size: 13.5px; line-height: 1.4; color: var(--if-muted); }

/* the YouTube link (no embedded player: privacy policy without YouTube) */
.ifv-sec .ifv-video { margin: 4px 0 1.2em; }
.ifv-video a {
    display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 18px 0 14px; border-radius: 20px;
    font: 700 15px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .04em; text-decoration: none !important;
    color: #fff !important; background: var(--if-navy);
}
.ifv-video a::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--if-red); }
.ifv-video a:hover { background: var(--if-eisblau-dark); }

/* Heimspiel review: shop link and covers next to the text */
.ifv-sec .ifv-shop { margin: 0 0 14px; }
.ifv-sec--cover { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 28px; }
.ifv-sec--cover > a[name], .ifv-sec--cover > .ifv-sec__title { grid-column: 1 / -1; }
.ifv-cover { display: block; align-self: start; border-radius: 4px; overflow: hidden; box-shadow: var(--if-shadow); transition: box-shadow .15s, transform .15s; }
.ifv-cover img { display: block; width: 100%; height: auto; }
.ifv-cover:hover { box-shadow: 0 0 0 2px var(--if-eisblau), var(--if-shadow-l); transform: translateY(-1px); }

/* the line of the old footer */
.ifv-claim { margin: 26px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--if-line); font: 600 15px/1.35 var(--if-font-head); text-transform: uppercase; letter-spacing: .03em; color: var(--if-muted); }

/* right column: registration, screenshots of the Heimspiel review */
.ifv-side { position: relative; align-self: stretch; }
.ifv--screens .ifp-register--big { position: static; }
.ifv-screens { display: grid; gap: 16px; margin-top: 20px; }
.ifv-screen { margin: 0; padding: 12px 12px 14px !important; }
.ifp .ifv-screen__title { margin: 0 0 10px; font: 700 17px/1 var(--if-font-head); text-transform: uppercase; letter-spacing: .02em; }
.ifv-screen__shot { aspect-ratio: auto; }
.ifv-screen__shot img { height: auto; }

@media (max-width: 1180px) {
    .ifv { grid-template-columns: minmax(0, 1fr) 320px; padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 860px) {
    .ifp-hero--verein .ifp-hero__title { font-size: 38px; }
    .ifv { grid-template-columns: minmax(0, 1fr); padding-left: 18px; padding-right: 18px; }
    .ifv-article { padding: 22px 18px 24px !important; }
    .ifp .ifv-sec__title { font-size: 24px; }
    .ifv-sec .ifv-lead { font-size: 17px; }
    .ifv-sec--cover { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 16px; }
    .ifv-screens { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}