/* ==========================================================================
   Kurs-Material (Equipment) — Hub + Detail (Phase 1)
   Wird nur auf /kurs-material/ + Detailseiten geladen (siehe equipment-cpt.php).
   SoS-Orange = #ffa000.
   ========================================================================== */

/* --- Icon+Name-Pille (auch in Phase 2 auf Kursseiten wiederverwendet) ------ */
.sos-tool-pill{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:6px 16px;
	min-height:36px;
	box-sizing:border-box;
	background:#f4f4f4;
	border:1px solid #e2e2e2;
	border-radius:999px;
	font-size:14px;
	line-height:1.1;
	color:#222;
	text-decoration:none;
	vertical-align:middle;
}
a.sos-tool-pill:hover{background:#ececec;border-color:#ffa000;}
.sos-tool-pill__icon{width:22px;height:22px;object-fit:contain;display:block;flex:0 0 auto;}
.sos-tool-pill__icon--initial{display:flex;align-items:center;justify-content:center;border-radius:6px;background:#ffa000;color:#fff;font-weight:700;font-size:12px;line-height:1;}
.sos-tool-pill__label{font-weight:600;white-space:nowrap;}

/* Equipment-Pillen-Reihe in der "Empfohlene Tools"-Box (single-course) */
.sos-course-equipment{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}

/* --- Hero-Titel im Masthead (wie Kursseiten: absolut unten zentriert) --- */
/* Theme positioniert .frame-title nur fuer single-course-only/kursorte/etc.
   absolut unten. single-equipment fehlt dort → hier nachziehen. */
.single-equipment .frame-title,
.post-type-archive-equipment .frame-title{
	display:block;
	width:477px;
	max-width:91%;
	margin:0 auto;
	position:absolute;
	bottom:26px;
	left:0;
	right:0;
}
/* Hub-Titel zentriert (Einzeleintrag-Titel bleibt linksbuendig im Frame) */
.post-type-archive-equipment .frame-title{text-align:center;}

/* Bilder-Carousel (einheitlicher Crop 16:9) */
.sos-eq-carousel{position:relative;}
.sos-eq-carousel__track{
	display:flex;
	gap:16px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	padding-bottom:6px;
	-webkit-overflow-scrolling:touch;
}
.sos-eq-carousel__track::-webkit-scrollbar{height:8px;}
.sos-eq-carousel__track::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px;}
.sos-eq-carousel__item{
	flex:0 0 48%;
	scroll-snap-align:start;
	margin:0;
}
.sos-eq-carousel__item img{
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	border-radius:8px;
	display:block;
	background:#fafafa;
}
.sos-eq-carousel__item figcaption{
	margin-top:8px;
	font-size:13px;
	color:#666;
	line-height:1.4;
}
.sos-eq-carousel__nav{
	position:absolute;
	top:calc(50% - 18px);
	transform:translateY(-50%);
	width:44px;height:44px;
	border:0;border-radius:50%;
	background:rgba(0,0,0,.6);color:#fff;
	font-size:24px;line-height:1;
	cursor:pointer;z-index:2;
	display:flex;align-items:center;justify-content:center;
}
.sos-eq-carousel__nav:hover{background:#ffa000;}
.sos-eq-carousel__nav--prev{left:8px;}
.sos-eq-carousel__nav--next{right:8px;}
@media (max-width:640px){
	.sos-eq-carousel__item{flex:0 0 86%;}
	.sos-eq-carousel__nav{display:none;}
}

/* --- Hub --------------------------------------------------------------- */
/* Theme rendert h1.title-regular inline/float — hier als Block erzwingen,
   sonst laeuft der Intro-Text neben die Ueberschrift. */
.sos-eq-hub h1.title-regular{display:block;float:none;width:100%;clear:both;margin-bottom:14px;}
.sos-eq-hub__intro{clear:both;max-width:760px;margin:0 0 28px;font-size:17px;line-height:1.6;}

.sos-eq-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
	gap:22px;
}
.sos-eq-card{
	display:flex;
	flex-direction:column;
	border:1px solid #e6e6e6;
	border-radius:10px;
	overflow:hidden;
	background:#fff;
	text-decoration:none;
	color:inherit;
	transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.sos-eq-card:hover{
	box-shadow:0 8px 24px rgba(0,0,0,.10);
	transform:translateY(-2px);
	border-color:#ffa000;
}
.sos-eq-card__media{
	display:block;
	background:#fafafa;
	aspect-ratio:16/10;
	overflow:hidden;
}
.sos-eq-card__img{width:100%;height:100%;object-fit:cover;display:block;}
.sos-eq-card__noimg{display:flex;align-items:center;justify-content:center;height:100%;font-size:48px;opacity:.5;}
.sos-eq-card__body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;}
.sos-eq-card__title{margin:4px 0 0;font-size:20px;line-height:1.25;}
.sos-eq-card__blurb{margin:0;font-size:14px;color:#555;line-height:1.5;}
.sos-eq-card__cta{margin-top:auto;padding-top:6px;font-weight:700;color:#ffa000;font-size:14px;}

/* --- Detail ------------------------------------------------------------ */
/* Reiner Block-Flow — robust gegen Theme-Grid-/Flex-Quirks. Foto oben
   zentriert, Intro voll breit darunter. */
.sos-eq-single__head{margin-bottom:14px;}
.sos-eq-single__photo{
	margin:0 auto 24px;
	max-width:480px;
	background:#fafafa;
	border:1px solid #eee;
	border-radius:10px;
	padding:20px;
	text-align:center;
	box-sizing:border-box;
}
.sos-eq-single__photo img{max-width:100%;height:auto;object-fit:contain;}
.sos-eq-single__back{margin-bottom:18px;text-align:right;}
.sos-eq-single__intro{display:block;width:100%;}
.sos-eq-single__titlerow{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:0 0 18px;clear:both;width:100%;}
.sos-eq-single__eyebrow{margin:0;flex:0 0 auto;}
.sos-eq-single__title{margin:0;flex:1 1 auto;min-width:0;font-size:40px;line-height:1.1;font-weight:700;}
.sos-eq-single__desc{font-size:16px;line-height:1.65;margin-bottom:18px;}
/* Content-Ueberschriften (the_content) kleiner als die H1 halten */
.sos-eq-single__desc h2{font-size:25px;line-height:1.2;margin:26px 0 12px;}
.sos-eq-single__desc h3{font-size:20px;line-height:1.25;margin:22px 0 10px;}

.sos-eq-single__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.sos-eq-btn{
	display:inline-block;
	padding:12px 22px;
	border-radius:6px;
	font-weight:700;
	text-decoration:none;
	font-size:15px;
}
.sos-eq-btn--buy{background:#ffa000;color:#fff;}
.sos-eq-btn--buy:hover{background:#e69200;color:#fff;}
.sos-eq-btn--rent{background:#222;color:#fff;}
.sos-eq-btn--rent:hover{background:#000;color:#fff;}
.sos-eq-link{font-weight:600;color:#666;text-decoration:underline;font-size:14px;}
.sos-eq-btn--sm{padding:8px 14px;font-size:13px;white-space:nowrap;}

.sos-eq-block{margin:34px 0;}
.sos-eq-block h2{font-size:24px;margin:0 0 16px;}
.sos-eq-block__lead{margin:0 0 16px;color:#555;}

.sos-eq-specs{width:100%;border-collapse:collapse;max-width:640px;}
.sos-eq-specs th,.sos-eq-specs td{
	text-align:left;
	padding:10px 14px;
	border-bottom:1px solid #ececec;
	font-size:15px;
	vertical-align:top;
}
.sos-eq-specs th{width:40%;font-weight:700;color:#333;background:#fafafa;}

/* YouTube-Video — responsive 16:9 */
.sos-eq-video{max-width:860px;}
.sos-eq-video .sos-course-video-embed{position:relative;width:100%;padding-bottom:56.25%;height:0;border-radius:8px;overflow:hidden;}
.sos-eq-video .sos-course-video-embed iframe{position:absolute;inset:0;width:100%!important;height:100%!important;}

/* Vergleichstabelle (Generationen) — Spalten umbrechen statt scrollen */
.sos-eq-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.sos-eq-compare-hint{display:none;font-size:12.5px;color:#888;font-style:italic;margin:0 0 8px;}
.sos-eq-compare{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed;}
.sos-eq-compare th,.sos-eq-compare td{padding:9px 12px;border:1px solid #ececec;text-align:left;vertical-align:top;overflow-wrap:break-word;word-break:normal;hyphens:auto;}
.sos-eq-compare thead th{background:#222;color:#fff;font-weight:700;}
.sos-eq-compare thead th:first-child{background:#111;}
.sos-eq-compare tbody tr:nth-child(even){background:#fafafa;}
.sos-eq-compare__rowhead{background:#f4f4f4;font-weight:700;color:#333;width:22%;}
.sos-eq-compare .sos-eq-btn--sm{white-space:normal;overflow-wrap:normal;word-break:keep-all;hyphens:none;}

.sos-eq-features{margin:0;padding-left:22px;max-width:680px;}
.sos-eq-features li{margin:0 0 9px;font-size:16px;line-height:1.55;}

.sos-eq-courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.sos-eq-course-card{
	display:flex;
	flex-direction:column;
	gap:8px;
	border:1px solid #e6e6e6;
	border-radius:8px;
	padding:14px;
	text-decoration:none;
	color:inherit;
	background:#fff;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.sos-eq-course-card:hover{border-color:#ffa000;box-shadow:0 4px 14px rgba(0,0,0,.08);}
.sos-eq-course-card__img img{width:100%;height:auto;border-radius:6px;display:block;}
.sos-eq-course-card__title{font-weight:700;font-size:16px;line-height:1.3;}
.sos-eq-course-card__cta{color:#ffa000;font-weight:700;font-size:14px;margin-top:auto;}

@media (max-width:640px){
	/* Hero-Titel (Masthead) auf Mobile kleiner — Theme setzt 32px !important,
	   was bei "KURS-MATERIAL" / "Pioneer XDJ-RX3" aus dem Viewport laeuft. */
	.single-equipment .frame-title .course-in-frame,
	.post-type-archive-equipment .frame-title .course-in-frame{font-size:26px !important;line-height:1.14;hyphens:none;}
	.sos-eq-single__title{font-size:27px;}
	.sos-eq-single__titlerow{flex-direction:column;align-items:flex-start;gap:12px;}
	/* Vergleichstabelle: horizontal wischen statt quetschen + keine Silbentrennung */
	.sos-eq-compare{table-layout:auto;min-width:600px;}
	.sos-eq-compare th,.sos-eq-compare td{hyphens:none;}
	.sos-eq-compare__rowhead{white-space:nowrap;}
	.sos-eq-compare-hint{display:block;}
}