/* ===== HEROE DESIGN LAYER ===== */

/* UI base */
body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  color: #2b2b2b;
}

/* Headings as serif for publishing feel */
h1, h2, h3, h4, .font-serif {
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  letter-spacing: -0.02em;
}

/* Optional: make long reading areas serif */
.prose, .container-reading {
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  line-height: 1.75;
}

/* Buttons slightly less SaaS (keep subtle) */
.btn-primary {
  border-radius: .75rem;
  padding: .65rem 1.1rem;
}
.btn-outline-secondary, .btn-outline-primary {
  border-radius: .75rem;
}

/* Links like printed text */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout helpers */
.section { position: relative; }
.section-hero {
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.section-band {
  background: rgba(0,0,0,.03);
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.section-cta {
  background: rgba(13,110,253,.06);
  border-top: 1px solid rgba(13,110,253,.15);
}

/* Lists inside cards */
ul { padding-left: 1.1rem; }

/* ===== HERO full-bleed background image ===== */

.hs-hero-full{
  position: relative;
  overflow: hidden;      /* keeps the bg/overlay clipped to the hero */
  min-height: 520px;     /* optional: ensures it feels “hero” even with little content */
}

/* Background image layer */
.hs-hero-full .hs-hero-bg{
  position: absolute;
  inset: 0;
  background-image: url("/images/home/background1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);      /* tiny scale to avoid edge seams */
  z-index: 0;
}

/* Dark overlay for readability */
.hs-hero-full .hs-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.45) 50%,
    rgba(0,0,0,.25) 100%
  );
  z-index: 1;
}

/* Ensure content sits above overlay */
.hs-hero-full .container{
  position: relative;
  z-index: 2;
}

/* Generic band background */
.hs-band-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;
}

/* Lecture section background */
.hs-lecture-bg{
  background-image:url("/images/home/NuevaEspana.jpg");
}

/* Overlay for readability */
.hs-band-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.55) 50%,
    rgba(0,0,0,.35) 100%
  );
  z-index:1;
}

/* Ensure content is above overlay */
.hs-lecture-band .container{
  position:relative;
  z-index:2;
}

/* Section positioning */
.hs-lecture-band{
  position:relative;
  overflow:hidden;
}

/* Club page */
.club-hero{
  background:
    radial-gradient(1000px 520px at 15% 10%, rgba(13,110,253,.10), transparent 55%),
    radial-gradient(1000px 520px at 85% 10%, rgba(220,53,69,.08), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
}
.club-band{
  background: rgba(0,0,0,.03);
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Vacantes (optional micro-polish) */
.vacancy-card .badge { font-weight: 600; }


/* ===== NEW: Generic layout utilities (use across pages) ===== */

.container-narrow{
  max-width: 1100px;
}

/* A softer card that still respects Bootswatch */
.card-soft{
  border-radius: 1rem;
}

/* Reading panel: keeps it elegant + readable */
.reading-panel{
  max-width: 900px;
}

/* Make prose inside reading panel comfortable */
.reading-panel p{
  margin-bottom: 0.9rem;
}

/* Optional: slightly upscale the main title feel, without inline style */
.display-6{
  letter-spacing: -0.02em;
}

/* ===== NEW: Modal polish (still Bootswatch compatible) ===== */

/* Keep modal corners consistent with your brand */
.modal-content{
  border-radius: 1rem;
}

/* Improve form spacing a touch */
.modal-body .form-control{
  border-radius: .75rem;
}

/* Optional: make alerts inside cards a bit tighter */
.alert{
  border-radius: .75rem;
}

/* ===== Learn Spanish resource page ===== */

.container-narrow { max-width: 1100px; }

.hs-shell{
  border-radius: 1rem;
}

/* CTA inner card */
.hs-cta-card{
  border-radius: 1rem;
  background: rgba(13, 110, 253, .04); /* uses bootstrap primary hue lightly */
  border: 1px solid rgba(0,0,0,.06);
}

/* About section */
.hs-about{
  max-width: 860px;
}

.hs-about-title{
  /* keep it aligned with your serif heading style */
}

.hs-about-list{
  margin: 0 0 14px 1.1rem;
}

/* Modal polish */
.hs-modal{
  border-radius: 1rem;
}

.modal-content{
  border-radius: 1rem; /* consistent across site */
}

/* Make large inputs/buttons a little more “publishing” */
.form-control-lg{
  border-radius: .75rem;
}
.btn-lg{
  border-radius: .75rem;
}
.alert{
  border-radius: .75rem;
}

/* ===== Extras / Audio Library page ===== */

.container-narrow { max-width: 1100px; }

.hs-shell { border-radius: 1rem; }

/* Dark callout band */
.hs-dark-callout{
  background: #0f172a;
  color: #e5e7eb;
  border-radius: 1rem;
  padding: 18px;
}
.hs-dark-callout-title{
  font-weight: 900;
  margin-bottom: 6px;
}
.hs-dark-callout-sub{
  color: #cbd5e1;
  font-size: .95rem;
  line-height: 1.55;
}

/* Accordion polish */
.hs-acc-item{
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 10px;
}
.hs-acc-item .accordion-collapse{
  border-top: 1px solid rgba(0,0,0,0.06);
}
.hs-acc-button{
  font-weight: 900;
}
.hs-acc-body{
  padding: 16px;
}

/* Audio cards */
.hs-audio-card{
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: .9rem;
  background: #fbfdff;
}
.hs-audio-label{
  font-weight: 900;
  margin-bottom: 8px;
  color: #111827;
}
.hs-audio-player{
  width: 100%;
}