/* =========================================================
   AbrahamAdams.net — Cassiopeia user.css (Clean Baseline)
   Purpose:
   - Editorial-style Books front page (no cut/paste look)
   - Full-width article pages (no narrow columns)
   - Responsive images (never squeezed)
   - Hide Joomla header/banner clutter (scoped safely)
   ========================================================= */


/* =========================
   GLOBAL CLEANUP
   ========================= */

/* IMPORTANT:
   Do NOT globally hide .page-header, because it can also hide
   blog/article titles on /articles depending on layout.
   We hide it ONLY on the Books landing page further below.
*/

/* Remove extra top padding in Cassiopeia grid */
.site-grid {
  padding-top: 0 !important;
}
body { outline: 8px solid red !important; }

/* Hide the clickable brand/title (often links to Home) */
/*
.header .navbar-brand,
.header .brand-logo,
.header .site-title,
.header .site-branding {
  display: none !important;
} 
*/
/* Remove leftover header strip background/padding */
/*
header.header {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
*/
/*
header.header .container,
header.header .navbar {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
*/

/* =========================
   IMAGE SAFETY (SITE-WIDE)
   ========================= */

/* Never allow images to stretch/squeeze */
img {
  max-width: 100%;
  height: auto;
}


/* =========================
   ARTICLE PAGES (READ MORE)
   ========================= */

/* Make article pages use full available width */
body.com-content-article {
  --cassiopeia-grid-max-width: 100%;
}

/* Force Bootstrap containers to full width on article pages */
body.com-content-article .container,
body.com-content-article .container-sm,
body.com-content-article .container-md,
body.com-content-article .container-lg,
body.com-content-article .container-xl,
body.com-content-article .container-xxl,
body.com-content-article .container-component {
  max-width: 100% !important;
}

/* Hide Joomla article "details" metadata on article pages */
body.com-content-article .article-info {
  display: none !important;
}

/* Hide category label wherever Cassiopeia outputs it on article pages */
body.com-content-article .category-name,
body.com-content-article .cat-links,
body.com-content-article .page-category,
body.com-content-article .article-info-term,
body.com-content-article .article-info dd {
  display: none !important;
}


/* =========================
   FRONT PAGE (BOOKS LIST)
   Editorial / Think On The Net style
   ========================= */

/* Wrapper: allow full width and comfortable padding */
.aa-books-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

/* Hide page header title block ONLY on the Books landing page
   (prevents hiding titles on /articles) */
.aa-books-page .page-header,
.aa-books-page .page-header h1 {
  display: none !important;
}

/* Intro section */
.aa-hero {
  padding: 0 0 1rem 0;
}
.aa-hero__title {
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
}
.aa-hero__lead {
  font-size: 1.05rem;
  margin: 0;
  opacity: 0.9;
  max-width: 75ch;
}

/* List spacing */
.aa-books {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.25rem;
}

/* Card rows: NO heavy box – editorial row style */
.aa-book-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  background: transparent;
}

/* Cover container: no background box (prevents “sticker” look) */
.aa-book-card__cover {
  padding: 0;
  background: none;
  border: 0;
  display: flex;
  align-items: flex-start;
}

/* Cover image: responsive, never distorted */
.aa-book-card__cover img {
  width: clamp(160px, 18vw, 280px);
  height: auto;
  display: block;

  /* Soft editorial shadow that blends on light pages */
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.22));
}

/* Text */
.aa-book-card__title {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  line-height: 1.25;
}

.aa-book-card__desc {
  margin: 0 0 0.85rem;
  line-height: 1.6;
  max-width: 80ch;
}

/* Buttons */
.aa-book-card__actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.aa-btn {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.18);
}

.aa-btn--primary {
  background: #111;
  color: #fff !important;
  border-color: #111;
}

.aa-btn--ghost {
  background: transparent;
  color: #111 !important;
}

.aa-book-card__meta {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.75;
}

/* Footer CTA */
.aa-footer-cta {
  margin-top: 1.75rem;
  padding: 1rem 0;
}
.aa-footer-cta__title {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
}
.aa-footer-cta__desc {
  margin: 0;
  opacity: 0.85;
}

/* Mobile layout */
@media (max-width: 768px) {
  .aa-books-page {
    padding: 1.25rem 1rem;
  }

  .aa-book-card {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .aa-book-card__cover {
    justify-content: center;
  }

  .aa-book-card__cover img {
    width: min(240px, 100%);
  }
}


/* =========================
   AUDIO PLAYER BLOCK (ARTICLE PAGE)
   ========================= */

.aa-audio {
  margin: 1.25rem 0 1.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
}

.aa-audio audio {
  width: 100%;
  display: block;
}


/* =========================
   CATEGORY BLOG CLEANUP (/articles)
   ========================= */

/* Hide category title/description/subcategory blocks that can appear under breadcrumbs */
.com-content-category .page-header,
.com-content-category .category-desc,
.com-content-category .category-name,
.com-content-category .cat-children,
.com-content-category-blog .page-header,
.com-content-category-blog .category-desc,
.com-content-category-blog .category-name,
{
  display: none !important;
}

/* FORCE article titles to show on Category Blog (/articles) */
.com-content-category-blog .item-title,
.com-content-category-blog .item-title a,
.com-content-category-blog .blog-item h2,
.com-content-category-blog .blog-item h2 a {
  display: block !important;
  visibility: visible !important;
}
/* Category Blog: force titles visible even if template sets them to hidden */
.com-content-category-blog .item-title,
.com-content-category-blog .item-title a,
.com-content-category-blog h2.item-title,
.com-content-category-blog h2.item-title a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  position: static !important;
}
/* Show manual titles on the /articles listing */
.com-content-category-blog .aa-list-title {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  line-height: 1.25;
}

/* Hide that manual title on the full article page (Joomla already shows the real title there) */
body.com-content-article .aa-list-title {
  display: none !important;
}
/* Book article template */
.aa-book-article {
  max-width: 80ch;
}

.aa-book-title {
  text-align: center;
  margin: 0 0 0.35rem;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  line-height: 1.15;
}

.aa-book-subtitle {
  text-align: center;
  margin: 0 0 1.25rem;
  font-size: 1.1rem;
  opacity: 0.85;
}

.aa-book-cover {
  float: right;
  width: 210px;
  max-width: 45%;
  height: auto;
  margin: 0.25rem 0 1rem 1.25rem;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.22));
}

/* Responsive YouTube embed */
.aa-video {
  margin: 1.25rem 0 1.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
}

.aa-video__ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  border-radius: 12px;
}

.aa-video__ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.aa-video__caption {
  margin: 0.65rem 0 0;
  font-size: 0.95rem;
  opacity: 0.8;
}

/* Amazon CTA button */
.aa-cta {
  margin-top: 1.5rem;
}

.aa-amazon-btn {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.18);
  background: #111;
  color: #fff !important;
}

/* Small screens: avoid awkward float */
@media (max-width: 768px) {
  .aa-book-cover {
    float: none;
    display: block;
    margin: 0 auto 1rem;
    width: min(240px, 100%);
    max-width: 100%;
  }
}
.aa-inline-nav {
  margin-top: 1rem;
  font-size: 0.95rem;
}

.aa-inline-nav a {
  color: #555;
  text-decoration: none;
  font-weight: 500;
}

.aa-inline-nav a:hover {
  text-decoration: underline;
}

.aa-inline-nav span {
  margin: 0 0.5rem;
  color: #999;
}
body { outline: 6px solid red !important; }
/* =========================
   FIX: Cassiopeia header/menu visibility
   ========================= */

/* Give the header/nav area a real height and spacing */
header.header .container-nav,
header.header nav.navbar,
header.header .navbar {
  min-height: 56px !important;
  padding: 0.6rem 1rem !important;
}

/* Make sure menu links are visible */
header.header .navbar-nav .nav-link,
header.header .navbar-nav .nav-link:visited {
  color: #111 !important;
  opacity: 1 !important;
}

/* Improve hover/focus */
header.header .navbar-nav .nav-link:hover,
header.header .navbar-nav .nav-link:focus {
  text-decoration: underline;
}

/* Mobile hamburger icon (if using collapsible menu) */
header.header .navbar-toggler {
  border-color: rgba(0,0,0,0.2) !important;
}
header.header .navbar-toggler-icon {
  filter: none !important;
}
/* =========================
   TOPBAR NAV (clean + reliable)
   ========================= */

/* Give topbar a visible strip */
.topbar,
.container-topbar,
.top-bar,
.topbar > .container,
.container-header .topbar {
  display: block !important;
  padding: 0.5rem 1rem !important;
  background: rgba(0,0,0,0.04) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* Style the menu module inside topbar */
.aa-topbar-nav ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.aa-topbar-nav a {
  color: #111 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.aa-topbar-nav a:hover {
  text-decoration: underline !important;
}
/* =========================
   TOPBAR NAV (clean + reliable)
   ========================= */

/* Give topbar a visible strip */
.topbar,
.container-topbar,
.top-bar,
.topbar > .container,
.container-header .topbar {
  display: block !important;
  padding: 0.5rem 1rem !important;
  background: rgba(0,0,0,0.04) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* Style the menu module inside topbar */
.aa-topbar-nav ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.aa-topbar-nav a {
  color: #111 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.aa-topbar-nav a:hover {
  text-decoration: underline !important;
}
/* =========================================================
   TOPBAR NAV — clean + brand hidden
   ========================================================= */

/* Hide Cassiopeia brand text/logo but keep the menu */
.container-topbar .navbar-brand,
.topbar .navbar-brand,
.container-header .navbar-brand,
header .navbar-brand {
  display: none !important;
}

/* Make topbar a neat slim strip */
.container-topbar,
.topbar {
  background: rgba(0,0,0,0.04) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* Space and align menu items */
.container-topbar ul,
.topbar ul,
.container-topbar .navbar-nav,
.topbar .navbar-nav {
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0.6rem 1rem !important;
  list-style: none !important;
}

/* Link styling */
.container-topbar a,
.topbar a,
.container-topbar .nav-link,
.topbar .nav-link {
  color: #111 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.container-topbar a:hover,
.topbar a:hover {
  text-decoration: underline !important;
}
/* =========================================================
   TOPBAR: remove Cassiopeia blue + set clean neutral bar
   ========================================================= */

/* Kill the blue background on the topbar strip */
.container-topbar,
.topbar,
.container-header .container-topbar {
  background: #fff !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.10) !important;
}

/* If Cassiopeia is applying a gradient via the header container */
.container-header,
header.header {
  background: transparent !important;
  background-image: none !important;
}

/* Optional: make the bar slightly “editorial” without blue */
.container-topbar {
  box-shadow: none !important;
}

/* Keep your menu links readable */
.container-topbar a,
.container-topbar .nav-link {
  color: #111 !important;
}
/* =========================
   Articles landing page intro styling
   ========================= */

.com-content-category-blog .category-desc h1 {
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.com-content-category-blog .category-desc h2 {
  font-size: 1.2rem;
  margin-top: 1.5rem;
}

.com-content-category-blog .category-desc p {
  max-width: 75ch;
  line-height: 1.6;
}
/* =========================================================
   AUDIO PLAYER — black on white (inverted style)
   ========================================================= */

/* Player container */
.aa-audio-player {
  background: #fff !important;
  border: 2px solid #000 !important;   /* black outline */
  border-top: 0;
  border-radius: 0 0 18px 18px;
  padding: 0.85rem 1rem;
}

/* Native audio element */
.aa-audio-player audio {
  width: 100%;
  background: #fff;
}

/* Ensure dark controls where supported */
.aa-audio-player audio {
  color-scheme: light;
}
/* =========================================================
   AUDIO PLAYER — black on white (inverted style)
   ========================================================= */

/* Player container */
.aa-audio-player {
  background: #fff !important;
  border: 2px solid #000 !important;   /* black outline */
  border-top: 0;
  border-radius: 0 0 18px 18px;
  padding: 0.85rem 1rem;
}

/* Native audio element */
.aa-audio-player audio {
  width: 100%;
  background: #fff;
  color-scheme: light;                /* force light controls */
}

/* =========================================================
   OPTIONAL: unify image + player outline
   ========================================================= */

.aa-audio-hero {
  border-bottom: 0;                   /* joins the two blocks */
}
/* =========================================================
   AUDIO PLAYER — black on white (for your current markup)
   ========================================================= */

.aa-audio {
  background: #fff !important;
  border: 2px solid #000 !important;      /* black outline */
  border-radius: 14px !important;
  padding: 0.85rem 1rem !important;
}

.aa-audio audio {
  width: 100%;
  display: block;
  background: #fff;
  color-scheme: light;                    /* force light controls where supported */
}
/* =========================================================
   AUDIO ARTICLE CARD (image + player as one component)
   Black outline + white player panel
   ========================================================= */

.aa-audio-card {
  border: 2px solid #000;          /* one black outline around BOTH */
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  margin: 1rem 0 1.25rem;
}

/* Cinematic image */
.aa-audio-card__hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Player panel (white) */
.aa-audio-card__player {
  padding: 0.85rem 1rem;
  background: #fff;
  border-top: 2px solid #000;      /* divider line between image and player */
}

.aa-audio-card__player audio {
  width: 100%;
  display: block;
  background: #fff;
  color-scheme: light;             /* keeps controls light where supported */
}
/* OPTIONAL: limit width of audio card and center it */
.aa-audio-card {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}
/* Hide category label/title on Books category listing */
.com-content-category-blog .category-name,
.com-content-category-blog .page-category,
.com-content-category-blog .cat-links {
  display: none !important;
}
/* Force dark audio controls in Chrome (match Firefox look) */
.aa-audio-card__player audio {
  color-scheme: dark;
}
/* =========================================================
   Listen label (audio articles)
   ========================================================= */

.aa-listen-label {
  display: inline-block;
  margin: 1rem 0 0.4rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  border: 1px solid #111;
  border-radius: 999px;
  background: transparent;
}
/* =========================================================
   Read More button — match Cassiopeia blue (footer color)
   ========================================================= */

/* Read More link styled as a button */
.readmore a,
a.readmore,
.btn.readmore {
  background-color: var(--cassiopeia-color-primary);
  color: #fff !important;
  border: 1px solid var(--cassiopeia-color-primary);
  border-radius: 10px;
  padding: 0.45rem 0.9rem;
  font-weight: 600;
  text-decoration: none !important;
  display: inline-block;
}

/* Hover / focus */
.readmore a:hover,
a.readmore:hover,
.btn.readmore:hover {
  background-color: var(--cassiopeia-color-primary-hover, #003a8f);
  color: #fff !important;
  text-decoration: none;
}
/* =========================================================
   Audio article book cover sizing (balanced with player)
   ========================================================= */

.aa-audio-card__hero {
  text-align: center;
}

.aa-audio-card .aa-audio-cover {
  display: inline-block;
  max-width: 260px;   /* key control */
  width: 100%;
  height: auto;
  margin: 0.75rem auto 0.5rem;
}

/* Slightly larger on desktop */
@media (min-width: 768px) {
  .aa-audio-card .aa-audio-cover {
    max-width: 300px;
  }
}
/* =========================================================
   Listen label: below image, bottom-left, before player
   ========================================================= */

.aa-audio-card__meta {
  padding: 0.65rem 1rem 0;  /* left alignment matches player padding */
  background: #fff;         /* keeps it clean between image + player */
}

.aa-listen-label {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #111;
  border: 1px solid #111;
  border-radius: 999px;
  background: transparent;
}
/* =========================================================
   Amazon purchase button
   ========================================================= */

.aa-amazon-btn {
  display: inline-block;
  margin: 1rem 0;
  padding: 0.65rem 1.1rem;

  background: #111;
  color: #fff !important;

  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;

  border-radius: 12px;
  border: 1px solid #111;

  transition: background 0.2s ease, transform 0.1s ease;
}

.aa-amazon-btn:hover {
  background: #000;
  transform: translateY(-1px);
}

.aa-amazon-btn:active {
  transform: translateY(0);
}
/* =========================================================
   Book video showcase (landing page)
   ========================================================= */

.aa-video-showcase {
  margin-top: 3rem;
}

.aa-video-showcase__title {
  margin-bottom: 1rem;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.aa-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* Video card */
.aa-video-card {
  max-width: 100%;
}

/* Responsive 16:9 */
.aa-video-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 14px;
}

.aa-video-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Caption */
.aa-video-caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Mobile */
@media (max-width: 900px) {
  .aa-video-grid {
    grid-template-columns: 1fr;
  }
}
/* Hide category label on Contact page only */
body.article-id-34 .article-info,
body.article-id-34 .category-name,
body.article-id-34 .cat-links {
  display: none !important;
}
/* =========================================================
   Hide category ("Uncategorised") on Contact page only
   Article ID: 34
   ========================================================= */

body.article-id-34 .page-header,
body.article-id-34 .page-header h1,
body.article-id-34 .page-category,
body.article-id-34 .category-name,
body.article-id-34 .cat-links,
body.article-id-34 .article-info,
body.article-id-34 .article-info-term,
body.article-id-34 .article-info dd {
  display: none !important;
}
/* =========================================================
   Video article layout (editorial, audio-style)
   ========================================================= */

.aa-video-article {
  max-width: 80ch;
  margin: 2rem auto;
}

/* Video container */
.aa-video-article__media {
  margin-bottom: 0.75rem;
}

/* 16:9 responsive video */
.aa-video-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 14px;
}

.aa-video-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Meta label */
.aa-video-article__meta {
  margin: 0.5rem 0 0.75rem;
}

.aa-video-label {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #111;
  border: 1px solid #111;
  border-radius: 999px;
  background: transparent;
}

/* Text content */
.aa-video-article__content p {
  max-width: 75ch;
  line-height: 1.6;
}
/* =========================================================
   Video article text alignment — match audio articles
   ========================================================= */

.aa-video-article__content {
  text-align: left;
}

.aa-video-article__content p {
  margin-left: 0;
  margin-right: 0;
}
/* =========================================================
   Video article: force left-aligned text (override any inherited centering)
   ========================================================= */

.aa-video-article,
.aa-video-article * {
  text-align: left !important;
}

/* Keep the video itself unaffected */
.aa-video-article .aa-video-ratio,
.aa-video-article .aa-video-ratio * {
  text-align: initial !important;
}
/* =========================================================
   Video article — match audio article width
   ========================================================= */

.aa-video-article__inner {
  max-width: 80ch;
  margin: 1.5rem auto 0;
}

/* Video stays inside the column */
.aa-video-article__media {
  margin-bottom: 0.75rem;
}

/* Responsive 16:9 video */
.aa-video-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 14px;
}

.aa-video-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ensure text is left-aligned */
.aa-video-article__meta,
.aa-video-article__content {
  text-align: left;
}
/* =========================================================
   Video article text — force editorial left alignment
   ========================================================= */

.aa-video-article__text {
  text-align: left;
  max-width: 75ch;
  margin-left: 0;
  margin-right: 0;
}
/* =========================================================
   Video card (match audio-card behaviour)
   ========================================================= */

.aa-video-card {
  max-width: 80ch;
  margin: 1.25rem auto 1.25rem; /* centered card, like audio */
}

.aa-video-card__meta {
  margin-top: 0.6rem;
  text-align: left; /* label starts from left edge of the card */
}

/* Keep the video responsive and not full page width */
.aa-video-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 14px;
}

.aa-video-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Home page: Video showcase (fix tiny iframes + align nicely) */
.aa-books-page .aa-video-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
  align-items:start;
}

.aa-books-page .aa-video-card{
  width:100%;
}

.aa-books-page .aa-video-ratio{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  overflow:hidden;
  border-radius:14px;
}

.aa-books-page .aa-video-ratio iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.aa-books-page .aa-video-caption{
  margin:0.5rem 0 0;
  text-align:left;
  font-size:0.9rem;
  opacity:0.85;
}

@media (max-width: 900px){
  .aa-books-page .aa-video-grid{ grid-template-columns:1fr; }
}