/* ==========================================================================
   Breakfast Club — Stran "O meni"
   ========================================================================== */

.bc-about { padding-bottom: 0; }

/* ------- Ozadje: dekorativne nepravilne oblike (blobi) -------
   Sloj in stili so skupni z domačo stranjo (home.css + template-parts/home/bg-blobs.php);
   tu le nekoliko manjše oblike, ker je stran krajša od domače. */
.bc-about { --bc-blob-w: clamp(280px, 50vw, 660px); }

/* ------- Uvod ------- */
.bc-about-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--bc-cream) 72%, transparent), transparent); padding: clamp(32px, 5vw, 64px) 0 clamp(24px, 4vw, 48px); }
.bc-about-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.bc-about-hero__title { font-size: clamp(2rem, 5vw, 3.2rem); margin: .1em 0 .4em; }
.bc-about-hero__lead { color: var(--bc-body); font-size: 1.05rem; line-height: 1.75; }
.bc-about-hero__lead p:last-child { margin-bottom: 0; }
/* Portret v nepravilni obliki. Obris je SVG clipPath (inline v page-o-meni.php),
   zato box-shadow ne pride v poštev — senco riše drop-shadow na okvirju, ki
   sledi izrezani silhueti. Za portretom je še mehka pastelna lisa. */
.bc-about-hero__media { position: relative; }
.bc-about-hero__defs, .bc-shape-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bc-about-hero__frame {
	position: relative; z-index: 1;
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .16));
}
.bc-about-hero__img {
	display: block; width: 100%; aspect-ratio: 1 / 1.06; object-fit: cover;
	clip-path: url(#bc-about-portrait);
}
.bc-about-hero__spot {
	position: absolute; z-index: 0; inset: -9% -12% -7% -8%;
	background: linear-gradient(150deg, color-mix(in srgb, var(--bc-primary) 34%, var(--bc-blush)) 0%, var(--bc-butter) 100%);
	clip-path: url(#bc-about-portrait-spot);
	opacity: .55;
}

/* ------- Bloki (slika + besedilo, izmenično) ------- */
.bc-ablocks { display: grid; gap: clamp(36px, 6vw, 72px); }
.bc-ablock { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3.5vw, 48px); align-items: center; }
.bc-ablock__media { border-radius: var(--bc-r-lg); overflow: hidden; box-shadow: var(--bc-shadow-sm); background: var(--bc-cream); }
.bc-ablock__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.bc-ablock__title { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .5em; }
.bc-ablock__text { color: var(--bc-body); line-height: 1.75; }
.bc-ablock__text p:last-child { margin-bottom: 0; }
/* Blok brez slike: besedilo v ožjem, centriranem stolpcu (da vrstice ostanejo berljive). */
.bc-ablock--noimg .bc-ablock__content { max-width: 760px; margin: 0 auto; }

/* ------- Številke ------- */
.bc-astats__title { text-align: center; font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 clamp(24px, 3vw, 40px); }
.bc-astats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; }
.bc-astat {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
	background: rgba(255, 255, 255, .7); border-radius: var(--bc-r-lg); padding: 24px 18px;
}
.bc-astat__emoji { font-size: 1.8rem; line-height: 1; margin-bottom: 6px; }
.bc-astat__value { font-family: var(--bc-font-head); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--bc-secondary-dk); line-height: 1.1; }
.bc-astat__label { color: var(--bc-body); font-size: .92rem; }

/* Slog .bc-aquote je v theme.css — uporablja ga tudi prodajna stran izdelka. */
/* Znotraj mreže blokov citat dobi nekaj več zraka kot sam razmik mreže. */
.bc-ablocks > .bc-aquote { padding-block: clamp(8px, 2vw, 24px); }

/* ------- Poudarjeni odstavek ------- */
.bc-ahighlight__quote {
	margin: 0; padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 48px);
	background: var(--bc-cream); border-left: 5px solid var(--bc-primary); border-radius: var(--bc-r);
	max-width: 900px; margin-inline: auto;
	font-family: var(--bc-font-head); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.35rem);
	line-height: 1.6; color: var(--bc-ink);
}
.bc-ahighlight__quote p:last-child { margin-bottom: 0; }

/* ------- Zaključek ------- */
.bc-aoutro__text { max-width: 760px; margin: 0 auto; text-align: center; color: var(--bc-body); line-height: 1.75; font-size: 1.05rem; }
.bc-aoutro__text p { margin-bottom: clamp(20px, 3vw, 30px); }
.bc-aoutro__text p:last-child { margin-bottom: 0; }

/* Zadnji odstavek je uvod v newsletter blok pod njim, zato izstopa: naslovna
   pisava, večja stopnja in črtica nad njim. Pogoj :not(:first-child) poskrbi,
   da enoodstavčno besedilo (če ga kdo skrajša) ne postane nenadoma ogromno. */
.bc-aoutro__text p:last-child:not(:first-child) {
	font-family: var(--bc-font-head);
	font-size: clamp(1.15rem, 2.4vw, 1.45rem);
	font-weight: 500;
	line-height: 1.6;
	color: var(--bc-ink);
	max-width: 42ch;
	margin-inline: auto;
}
.bc-aoutro__text p:last-child:not(:first-child)::before {
	content: ""; display: block;
	width: 56px; height: 4px; border-radius: 999px;
	background: linear-gradient(90deg, var(--bc-primary), var(--bc-accent));
	margin: 0 auto clamp(22px, 3vw, 30px);
}
/* Krepko besedilo iz Customizerja dobi barvni poudarek. */
.bc-aoutro__text strong { color: var(--bc-primary-dark); font-weight: 800; }

/* ------- Responsive ------- */
/* Enostolpčni prikaz: portret omejimo, da ne zavzame cele širine zaslona. */
@media (max-width: 991px) {
	.bc-about-hero__media { max-width: 420px; margin-inline: auto; }
	/* Ko se blok zloži v en stolpec, bi fotografija sicer zavzela vso širino
	   (npr. 860 px široko in 645 px visoko na tablici). Omejimo jo in centriramo. */
	.bc-ablock__media { max-width: 440px; margin-inline: auto; width: 100%; }
	/* Enako za besedilo — čez celo širino tablice bi vrstica merila ~90 znakov. */
	.bc-ablock__content { max-width: 640px; margin-inline: auto; }
}
@media (min-width: 768px) {
	.bc-astats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	.bc-about-hero__grid { grid-template-columns: 1.15fr .85fr; }
	.bc-about-hero__grid--noimg { grid-template-columns: 1fr; max-width: 820px; }
	/* Fotografija dobi širši stolpec, besedilo ožjega — in ga v celoti zapolni.
	   Zato je razmik med sliko in besedilom v obeh smereh enak (samo gap), oba
	   bloka imata enako široko besedilo, robovi pa se ujemajo s kontejnerjem.
	   Sekcije namenoma ne ožimo: poravnana mora ostati z uvodom in zaključkom. */
	/* Sekcija z bloki je ožja od ostalih (1000 namesto 1200), razmerje stolpcev pa
	   je nastavljeno tako, da se skrči predvsem fotografija — besedilo ostane pri
	   ~445 px (~46 znakov na vrstico), kolikor je bilo usklajeno prej. */
	.bc-ablocks { max-width: 1000px; margin-inline: auto; }
	.bc-ablock { grid-template-columns: 1.05fr 1fr; }
	/* Sod blok: slika desno. Stolpca zamenjamo in oba elementa postavimo izrecno —
	   z "order" bi slika pristala v ožjem stolpcu, namenjenem besedilu. */
	.bc-ablock--rev { grid-template-columns: 1fr 1.05fr; }
	.bc-ablock--rev .bc-ablock__media   { grid-column: 2; grid-row: 1; }
	.bc-ablock--rev .bc-ablock__content { grid-column: 1; grid-row: 1; }
	.bc-ablock--noimg { grid-template-columns: 1fr; }
	.bc-astats__grid { grid-template-columns: repeat(5, 1fr); }
}