/*
 * SWO Spijkenisse – basic hero (homepage, SWO Krant, Alle blokken).
 * Ontwerp B (feedback SWO, 15-10-2026): een licht vlak met donkere tekst links en de foto rechts tot aan de rand van het
 * scherm, met een ronde linkerkant en een zachte oranje cirkel bovenaan. Achtergrond #FBF4EC, dezelfde kleur als het
 * krantblok. Geen donker vlak en geen kleurfilter over de foto. Mogelijkheden en de Paginakop met foto volgen dit ontwerp.
 * Smal (≤ 900px): de foto bovenaan over de volle breedte met een ronde hoek linksonder, de tekst eronder.
 * Backup van het vorige (donkerblauwe) ontwerp: backups/2026-10-15-feedback-ron/basic-hero.css.
 */
.basic-hero { --hero-foto: clamp(420px, 48vw, 900px); --hero-vlak: #FBF4EC; position: relative; overflow: hidden; width: 100%; background: var(--hero-vlak); }
/* Zachte oranje cirkel linksboven de foto (decoratief). */
.basic-hero--has-image::after { position: absolute; z-index: 0; right: calc(var(--hero-foto) - 120px); top: -80px; width: 230px; height: 230px; content: ""; background: #FCE3CB; border-radius: 50%; pointer-events: none; }
.basic-hero .site-container { position: relative; z-index: 2; }
.basic-hero__inner { position: relative; display: flex; min-height: 600px; align-items: stretch; }
.basic-hero__content { position: relative; z-index: 3; display: flex; width: 100%; max-width: 680px; min-height: 600px; flex-direction: column; justify-content: center; padding: 56px 0 72px; }
/* Tekst houdt afstand van de foto, ook op schermen tussen 900 en 1400px breed. */
.basic-hero--has-image .basic-hero__content { max-width: min(660px, calc(100vw - var(--hero-foto) - 64px - (100vw - 100%) / 2)); }

.basic-hero__breadcrumbs { margin-bottom: 18px; color: var(--swo-color-text); font-size: 16px; line-height: 1.5; }
.basic-hero__breadcrumbs p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.basic-hero__breadcrumbs a { color: var(--swo-color-heading); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(163, 71, 0, .6); text-underline-offset: 3px; }
.basic-hero__breadcrumbs a:hover { color: #A34700; }
.basic-hero__breadcrumbs a:focus-visible { outline: 3px solid var(--swo-color-focus); outline-offset: 3px; }
.basic-hero__subtitle { margin: 0 0 14px; color: #A34700; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.basic-hero__title { max-width: 680px; margin: 0; color: var(--swo-color-heading); font-size: clamp(42px, 4vw, 58px); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.basic-hero__text { max-width: 580px; margin-top: 20px; color: #394452; font-size: 20px; line-height: 1.6; }
.basic-hero__text p { margin: 0; }
.basic-hero__text p + p { margin-top: 14px; }

/* ---------- Zoekveld ---------- */
.basic-hero__search { width: 100%; max-width: 610px; margin-top: 32px; }
.basic-hero__search-form { width: 100%; }
.basic-hero__search-field { display: flex; width: 100%; min-height: 68px; align-items: center; padding: 7px 8px 7px 20px; background: #FFFFFF; border: 2px solid #6E6862; border-radius: 999px; box-shadow: 0 8px 24px rgba(70, 45, 20, .10); }
.basic-hero__search-field:focus-within { border-color: var(--swo-color-focus); outline: 3px solid var(--swo-color-focus); outline-offset: 3px; }
.basic-hero__search-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; margin-right: 12px; background: #A34700; -webkit-mask: url("../svg/search.svg") center / contain no-repeat; mask: url("../svg/search.svg") center / contain no-repeat; }
.basic-hero__search-input { width: 100%; min-width: 0; min-height: 48px; flex: 1; padding: 6px 0; color: var(--swo-color-heading); background: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; font-family: var(--swo-font-primary); font-size: 19px; line-height: 1.4; }
.basic-hero__search-input::placeholder { color: #5B6473; opacity: 1; }
.basic-hero__search-input:focus, .basic-hero__search-input:focus-visible { border: 0; outline: 0; box-shadow: none; }
.basic-hero__search-input::-webkit-search-decoration, .basic-hero__search-input::-webkit-search-cancel-button, .basic-hero__search-input::-webkit-search-results-button, .basic-hero__search-input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; }
.basic-hero__search-button { display: inline-flex; min-width: 150px; min-height: 52px; align-items: center; justify-content: center; padding: 0 26px; color: #111111; background: #E97C1A; border: 2px solid #E97C1A; border-radius: 999px; font-family: var(--swo-font-primary); font-size: 18px; line-height: 1.2; font-weight: 700; cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.basic-hero__search-button:hover { color: #111111; background: #D86D0D; border-color: #D86D0D; box-shadow: 0 4px 12px rgba(70, 45, 20, .18); transform: translateY(-1px); }
.basic-hero__search-button:focus-visible { outline: 3px solid var(--swo-color-focus); outline-offset: 3px; }

/* ---------- Knoppen ---------- */
.basic-hero__buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.basic-hero .button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; padding: 0 28px; border-radius: 999px; font-size: 18px; line-height: 1.3; font-weight: 700; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.basic-hero .button:hover { transform: translateY(-1px); text-decoration: none; }
.basic-hero .button:focus-visible { outline: 3px solid var(--swo-color-focus); outline-offset: 3px; }
.basic-hero .button--primary { color: #111111; background: #E97C1A; border: 2px solid #E97C1A; }
.basic-hero .button--primary:hover { color: #111111; background: #D86D0D; border-color: #D86D0D; }
.basic-hero .button--outline { color: var(--swo-color-heading); background: var(--swo-color-card); border: 2px solid #A34700; }
.basic-hero .button--outline:hover { color: var(--swo-color-heading); background: #FCE8D3; border-color: #A34700; }

/* ---------- Foto rechts met ronde linkerkant ---------- */
.basic-hero__media { position: absolute; z-index: 1; top: 0; right: calc((100vw - 100%) / -2); bottom: 0; width: var(--hero-foto); overflow: hidden; background: #EEE8E1; border-radius: 9999px 0 0 9999px; }
.basic-hero__media picture { display: block; width: 100%; height: 100%; }
.basic-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }

/* ---------- Zonder foto ---------- */
.basic-hero--no-image .basic-hero__inner { min-height: 420px; }
.basic-hero--no-image .basic-hero__content { max-width: 760px; min-height: 420px; padding: 54px 0 64px; }

@media (max-width: 1100px) {
	.basic-hero { --hero-foto: 44vw; }
	.basic-hero__inner, .basic-hero__content { min-height: 560px; }
	.basic-hero__title { font-size: clamp(38px, 4.4vw, 50px); }
	.basic-hero__text { font-size: 19px; }
}

@media (max-width: 900px) {
	/* Foto bovenaan, tekst eronder. */
	.basic-hero--has-image::after { display: none; }
	.basic-hero__inner { min-height: 0; flex-direction: column; }
	.basic-hero__media { position: relative; right: auto; left: 50%; width: 100vw; height: clamp(220px, 42vw, 340px); margin-bottom: 26px; border-radius: 0 0 0 140px; transform: translateX(-50%); }
	.basic-hero--has-image .basic-hero__content { max-width: 680px; }
	.basic-hero__content { min-height: 0; padding: 0 0 48px; }
	.basic-hero--no-image .basic-hero__content { padding: 40px 0 48px; }
}

@media (max-width: 640px) {
	.basic-hero__media { height: 220px; margin-bottom: 22px; border-radius: 0 0 0 100px; }
	.basic-hero__breadcrumbs { margin-bottom: 14px; font-size: 15px; }
	.basic-hero__subtitle { margin-bottom: 12px; font-size: 14px; letter-spacing: .12em; }
	.basic-hero__title { font-size: clamp(34px, 9vw, 42px); line-height: 1.08; }
	.basic-hero__text { margin-top: 16px; font-size: 18px; line-height: 1.55; }
	.basic-hero__search { margin-top: 24px; }
	.basic-hero__search-field { min-height: 62px; padding: 6px 6px 6px 14px; }
	.basic-hero__search-icon { width: 22px; height: 22px; flex-basis: 22px; margin-right: 10px; }
	.basic-hero__search-input { min-height: 42px; font-size: 17px; }
	.basic-hero__search-button { min-width: 120px; min-height: 48px; padding: 0 18px; font-size: 17px; }
	.basic-hero__buttons { gap: 12px; margin-top: 24px; }
	.basic-hero .button { min-height: 52px; padding: 0 22px; font-size: 17px; }
	.basic-hero__content, .basic-hero--no-image .basic-hero__content { padding-bottom: 40px; }
}

@media (max-width: 480px) {
	.basic-hero__title { font-size: clamp(32px, 9.5vw, 38px); }
	.basic-hero__search-field { flex-wrap: wrap; gap: 8px 0; padding: 8px 10px 10px 16px; border-radius: 24px; }
	.basic-hero__search-icon { margin-right: 10px; }
	/* Vergrootglas en invoerveld samen op de eerste regel, de knop eronder over de volle breedte. */
	.basic-hero__search-input { min-height: 44px; flex: 1 1 0%; font-size: 16px; }
	.basic-hero__search-button { width: 100%; min-width: 0; }
	.basic-hero__buttons { flex-direction: column; align-items: stretch; }
	.basic-hero .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.basic-hero__search-button, .basic-hero .button { transition: none; }
	.basic-hero__search-button:hover, .basic-hero .button:hover { transform: none; }
}

@media (forced-colors: active) {
	.basic-hero--has-image::after { display: none; }
	.basic-hero__search-field { border-color: CanvasText; }
}