/* Dr. Bagi Heart Centre — homepage additions (Instagram Reels + Blog carousel)
   Additive only: never edits style.css / pages.css / main.js. Reuses the same
   design tokens (assets/css/style.css) and the .rev-* carousel scaffold
   already used by the Patient Stories section, so both new sections look
   and behave like a native part of the approved homepage. */

/* shared icon sizing (normally supplied by pages.css, which the homepage
   intentionally never loads) */
.icon{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--red)}
.link-arrow .icon{transition:transform .25s}
.link-arrow:hover .icon{transform:translateX(4px)}

/* ---------- Instagram Reels carousel ----------
   Real Instagram oEmbed blockquotes (official embed.js — loaded once, see
   home-addons.js), forced into a vertical 9:16 Reel aspect ratio to match a
   phone-sized video card. Nothing is downloaded, copied or re-hosted; the
   fallback link inside each blockquote only shows if the embed script can't
   run (e.g. offline), so visitors can always reach the real Reel. */
.ig-card{padding:0;overflow:hidden;background:var(--navy-050)}
.ig-embed-wrap{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;background:var(--navy-050)}
.ig-embed-wrap iframe{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;max-width:none!important;border:0!important}
.ig-embed-wrap blockquote.instagram-media{margin:0!important;width:100%!important;min-width:0!important;max-width:100%!important;height:100%!important;border:0!important;box-shadow:none!important;background:transparent!important}
.ig-embed-wrap blockquote.instagram-media > a{display:flex;align-items:center;justify-content:center;height:100%;padding:22px;text-align:center;color:var(--red);font-family:var(--f-display);font-weight:700;font-size:14px;text-decoration:none}
/* Transparent tap/drag layer on top of the Instagram iframe. Once embed.js
   replaces the blockquote with a real cross-origin iframe, touches/clicks
   starting on that iframe never reach the page (separate browsing context),
   so the carousel can't be swiped there. This overlay sits above the iframe,
   so the swipe/drag handlers in home-addons.js (attached to .rev-track) see
   the gesture; a plain tap still opens the real Reel via this link, exactly
   as the visible embed underneath would have. */
.ig-tap{position:absolute;inset:0;z-index:2;display:block}
.ig-actions,.blog-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px}

/* ---------- Blog carousel ----------
   Ports the .blog-card component from assets/css/pages.css (not loaded on the
   homepage) so cards match the Blog page exactly, and gives the card a fixed
   width so it works inside the shared .rev-track carousel scaffold. */
.blog-carousel .rev-track .blog-card{flex:0 0 calc((100% - 48px)/3);box-sizing:border-box}
@media(max-width:960px){.blog-carousel .rev-track .blog-card{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:640px){.blog-carousel .rev-track .blog-card{flex-basis:100%}}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:transparent}
.blog-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--navy-050)}
.blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.blog-card:hover .blog-card-media img{transform:scale(1.05)}
.blog-card-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-card-meta{display:flex;gap:12px;align-items:center;font-size:12px;font-family:var(--f-display);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.blog-card-meta span{color:var(--red)}
.blog-card h3{font-size:18px;line-height:1.3;color:var(--ink)}
.blog-card h3 a:hover{color:var(--navy)}
.blog-card p{font-size:14px;color:var(--body);margin:0}
.blog-card .link-arrow{margin-top:auto;padding-top:6px}

/* ---------- Why Choose Us video facade ----------
   Restores a clickable YouTube thumbnail + play button in the existing
   .yt-embed container (same size/position/radius/shadow as before) instead
   of an always-on iframe, which YouTube can reject with "Error 153" when a
   video has domain-restricted embedding and the page has no real origin
   (e.g. opened as a local file). Loading the iframe only on click, on the
   real hosted domain, is exactly how main.js's existing [data-video] facade
   already works elsewhere on the site — this just uses it here too. */
.yt-embed{cursor:pointer}
.yt-embed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yt-embed .yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-red);transition:transform .25s,background .25s}
.yt-embed .yt-play svg{width:28px;height:28px;margin-left:3px}
.yt-embed:hover .yt-play,.yt-embed:focus-visible .yt-play{transform:translate(-50%,-50%) scale(1.08);background:var(--red-600)}

/* ---------- Carousel dot indicators ----------
   The "1 / 23"-style counter is removed from view entirely — the Prev/Next
   arrows plus the capped set of dots (see main.js / home-addons.js) are the
   only visible navigation now, across Reviews, Instagram and Blogs. */
.rev-count{display:none!important}

/* Mouse-drag affordance for all three carousels (see main.js / home-addons.js) */
.rev-track{cursor:grab}
.rev-track:active{cursor:grabbing}

/* ---------- Read more / Read less (Patient Stories) ----------
   Only ever affects a review card whose text actually overflows five lines;
   the existing shorter reviews render exactly as before. */
.rev-card p.rc-clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rc-more{align-self:flex-start;margin-top:-2px;background:none;border:0;padding:0;font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--navy);cursor:pointer}
.rc-more:hover{color:var(--red)}
.reviews-navy .rc-more{color:#fff}
.reviews-navy .rc-more:hover{color:var(--red)}