/*
Theme Name: Mats Gitarren Kurse
Theme URI: https://mats-gitarren-kurse.de
Author: Matthias Gloe
Description: Block-Theme (FSE) fuer Mats Gitarren Kurse. Schwarz/Weiss/Rot (#dd3333), eigener Post-Type "Kurse" plus normaler WordPress-Blog. Farben, Schrift und Layout ueber den normalen Website-Editor bearbeitbar.
Version: 1.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: mats-gitarren-kurse
*/

@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/inter-400.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/inter-500.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/inter-600.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/inter-700.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fonts/inter-800.woff2') format('woff2');
}

/* ---------- HEADER ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid #e6e6e6;gap:24px;flex-wrap:wrap;
}
.site-header-left{display:flex;align-items:center;gap:32px;}
.nav-icons{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center;gap:12px;}
.site-header img{height:44px;width:auto;}
.nav-menu{display:flex;gap:28px;align-items:center;}
.nav-menu a{font-weight:700;font-size:13.5px;line-height:1;color:#111111;text-decoration:none;}
.nav-menu a:hover{color:#dd3333;}
.site-header{padding:8px 24px;}
.site-logo-link{display:flex;align-items:center;}
.site-logo-link img{height:36px;width:auto;display:block;}
.icon-circle{
  width:32px;height:32px;border-radius:50%;background:#dd3333;color:#ffffff;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;
  line-height:1;text-decoration:none;overflow:hidden;flex-shrink:0;
}
.icon-circle:hover{background:#b82727;color:#fff;}

/* ---------- HERO ---------- */
.hero-section{
  position:relative;min-height:520px;display:flex;align-items:center;
  padding-left:max(24px, calc((100% - 1120px)/2 + 24px));
  padding-right:24px;
  background:
    linear-gradient(100deg, rgba(0,0,0,.72) 22%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.08) 100%),
    url("assets/img/hero.jpg");
  background-size:cover;background-position:center 42%;color:#fff;
}
.hero-section{--wp--style--block-gap: 14px;}
.hero-section h1{color:#fff;max-width:640px;margin:0 0 4px !important;text-align:left;}
.hero-section p{color:rgba(255,255,255,.85);max-width:480px;margin:0 !important;text-align:left;}
.hero-section > *{margin-left:0 !important;margin-right:auto !important;}
.hero-section{flex-direction:column;align-items:flex-start;justify-content:center;}
.hero-section > *{display:block;width:auto;max-width:640px;}

/* ---------- SECTION LABEL ---------- */
.eyebrow{font-weight:700;font-size:13px;letter-spacing:2px;color:#dd3333;text-transform:uppercase;}
.tag-new{
  display:inline-block;font-weight:800;font-size:14px;letter-spacing:1px;
  color:#fff;background:#111111;padding:4px 14px;border-radius:3px;
}

/* ---------- PRODUCT ROW (Kursliste via Query Loop) ---------- */
.product-row{
  display:flex;align-items:center;gap:20px;padding:22px 0;
  border-bottom:1px solid #e6e6e6;
}
.product-row .kurs-thumb{flex:0 0 84px;width:84px;height:84px;}
.product-row .kurs-thumb img{
  width:84px;height:84px;object-fit:cover;border-radius:4px;display:block;
}
.product-row .kurs-info{flex:1;min-width:0;}
.product-row .kurs-info h3{font-weight:700;font-size:16px;margin:0 0 6px;}
.product-row .kurs-info h3 a{color:#111111;text-decoration:none;}
.product-row .kurs-info h3 a:hover{color:#dd3333;}
.product-row .kurs-info p{
  font-size:13.5px;color:#6f6f6f;line-height:1.5;max-width:520px;margin:0;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.product-row .kurs-cta{flex:0 0 auto;text-align:right;}
.product-row .kurs-price{font-weight:800;font-size:19px;margin-bottom:10px;white-space:nowrap;}
.btn{
  display:inline-block;background:#dd3333;color:#ffffff !important;
  font-weight:600;font-size:13.5px;padding:11px 22px;border-radius:4px;
  text-decoration:none !important;white-space:nowrap;
}
.btn:hover{background:#b82727;}
.kurs-card .btn{font-size:11.5px;padding:7px 12px;}
.bundle-section{background:#f4f4f4;padding:8px 0 48px;margin-top:16px;}
.bundle-section .product-row{border-bottom:none;}

/* ---------- WEITERE KURSE (Karten) ---------- */
.card-grid{
  display:grid;grid-template-columns:repeat(3, 180px);gap:20px;
  justify-content:center;
}
.kurs-card{text-align:center;}
.kurs-card .kurs-card-thumb{aspect-ratio:1/1;margin:0 0 12px;}
.kurs-card .kurs-card-thumb img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block;}
.kurs-card h4{font-weight:700;font-size:13px;line-height:1.35;margin:0 0 10px;text-align:left;}
.kurs-card h4 a{color:#111111;text-decoration:none;}
.kurs-card h4 a:hover{color:#dd3333;}
.kurs-card-cta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.kurs-card-cta .kurs-price{font-weight:800;font-size:14px;}
.kurs-card .wp-block-button__link{font-size:11.5px;padding:7px 12px;}

/* ---------- TESTIMONIALS ---------- */
.testimonials-heading{background:#fff;text-align:center;padding:40px 24px 8px;}
.testimonials-section{
  background:
    linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),
    url("assets/img/rain-tile.jpg");
  background-size:200px auto;background-repeat:repeat;background-position:center;
  color:#fff;padding:56px 24px;text-align:center;
}
.guitar-icon{display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.testimonials-section h4{font-weight:700;margin:0 0 10px;color:#fff;}
.testimonials-section p{font-style:italic;max-width:440px;margin:0 auto;color:rgba(255,255,255,.92);line-height:1.6;font-size:15px;}
.quote-arrow{font-family:Arial, sans-serif;font-size:26px;line-height:1;color:rgba(255,255,255,.7);cursor:pointer;}
.quote-arrow:hover{color:#dd3333;}

/* ---------- DETAIL PAGE (Einzelner Kurs) ---------- */
.detail-cover{width:320px;aspect-ratio:1/1;border-radius:6px;overflow:hidden;}
.detail-cover img{width:100%;height:100%;object-fit:cover;}
.detail-buy .kurs-price-large{font-weight:800;font-size:34px;}
.detail-buy .price-note{font-size:12px;color:#6f6f6f;margin:4px 0 22px;}
.detail-buy .wp-block-button__link{
  font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;
  padding:14px 26px;
}

/* ---------- BLOG ---------- */
.blog-hero-section{background:#111111;color:#fff;padding:56px 24px 48px;text-align:center;}
.blog-hero-section h1{color:#fff;}
.blog-hero-section p{color:rgba(255,255,255,.75);max-width:520px;margin:14px auto 0;}
.article-card{
  border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.article-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px);}
.article-card .wp-block-post-featured-image{aspect-ratio:16/10;margin:0;}
.article-card .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;}
.article-card .art-tag{font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#dd3333;}
.article-card h3{font-weight:700;font-size:16.5px;line-height:1.35;margin:0 0 10px;}
.article-card p{font-size:13.5px;color:#6f6f6f;line-height:1.6;}

/* ---------- FOOTER ---------- */
.site-footer{padding:32px 24px;}
.footer-social{text-align:center;margin-bottom:24px;}
.footer-social .label{display:block;font-size:11px;letter-spacing:1px;color:#6f6f6f;margin-bottom:10px;}
.footer-social .icons{display:flex;justify-content:center;align-items:center;gap:12px;}
.footer-links{
  display:flex;justify-content:center;flex-wrap:wrap;gap:20px;
  border-top:1px solid #e6e6e6;padding-top:20px;font-size:13px;color:#6f6f6f;
}
.footer-links a{color:#6f6f6f;text-decoration:none;}
.footer-links a:hover{color:#dd3333;}

@media (max-width:720px){
  .card-grid{grid-template-columns:repeat(3,minmax(0,110px));gap:10px;}
  .kurs-card h4{font-size:11px;}
  .product-row{flex-wrap:wrap;}
  .product-row .kurs-cta{flex:1 0 100%;text-align:left;margin-top:8px;}
  .detail-cover{width:100%;}
}