/* =======================================================
   EaseFy Guides — TRUE 2100 Digital-Glass (no wrapper needed)
   Drop this LAST so it overrides Bootstrap.
   ======================================================= */

/* --- Brand tokens --- */
:root{
  --brand:#663d29;
  --accent:#da926e;
  --muted:#b59d55;

  --ink:#2b2b2b;
  --bg:#f8f4f0;
  --card:#fffaf3;

  --line:rgba(140,120,100,.22);
  --shadow:0 22px 60px rgba(102,61,41,.14), 0 8px 22px rgba(102,61,41,.10);
  --radius:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- Canvas: soft grid + aurora wash (page level) --- */
body{
  background:
    radial-gradient(1100px 600px at 86% -10%, rgba(218,146,110,.12), transparent 60%),
    radial-gradient(850px 520px at -10% 22%, rgba(181,157,85,.10), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 59px, #00000008 60px 60.5px),
    repeating-linear-gradient(0deg,  transparent 0 59px, #00000008 60px 60.5px),
    var(--bg) !important;  /* force over theme */
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- Card: glass skin + neon perimeter + sheen --- */
.container .row [class*="col"] > .card,
.card.guide-card,
.card.shadow-sm {
  position:relative;
  border-radius:var(--radius) !important;
  background:
    linear-gradient(180deg,#ffffffee,#ffffffcc),
    var(--card) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  overflow:hidden;
  isolation:isolate;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.container .row [class*="col"] > .card:hover,
.card.guide-card:hover,
.card.shadow-sm:hover{
  transform: translateY(-4px);
  box-shadow:0 26px 64px rgba(102,61,41,.18);
  filter:saturate(1.02);
}

/* Neon perimeter (click-through) */
.container .row [class*="col"] > .card::before,
.card.guide-card::before,
.card.shadow-sm::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(135deg, rgba(218,146,110,.24), transparent 40%),
    linear-gradient(315deg, rgba(255,255,255,.20), transparent 55%);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px; border:1px solid transparent;
}

/* Soft sheen */
@keyframes efGuideSheen{ to { transform: translateX(120%); } }
.container .row [class*="col"] > .card::after,
.card.guide-card::after,
.card.shadow-sm::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,#fff0 36%, #fff3 50%, #fff0 64%);
  filter:blur(8px); opacity:.45; animation: efGuideSheen 9s linear infinite;
}

/* --- Thumbnail (first image) --- */
.card > img:first-child{
  display:block; width:100%; height:auto;
  border-bottom:1px solid var(--line);
}

/* --- Chips/badges (Bootstrap or custom) --- */
.card .badge, .card .chip, .card .tag{
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius:999px;
  padding:.32rem .6rem;
  background:linear-gradient(180deg,#ffe9d5,#ffd8b9);
  border:1px solid #f3c9a9;
  color:#5a3c2e; font-weight:800; font-size:.9rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

/* --- Headings & copy --- */
.card h1, .card h2, .card h3{
  margin:.7rem 0 .35rem;
  font-weight:900;
  background:linear-gradient(180deg,#3d281d 0%, #7b4b37 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.card p{ color:#7a5a4b !important; }

/* --- “Read guide” underline glow --- */
.card a{
  color:var(--brand);
  text-decoration:none;
  position:relative;
}
.card a[href*="guide"]:after,
.card a.read-link:after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform:scaleX(.6); transform-origin:left center; opacity:.75;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.card a[href*="guide"]:hover:after,
.card a.read-link:hover:after{ transform:scaleX(1); opacity:1; }

/* --- Focus & motion --- */
a:focus-visible, button:focus-visible{ outline:3px solid rgba(218,146,110,.45); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* DEBUG: uncomment to verify this file is loaded and winning */
/* .card{ outline:3px solid hotpink !important; } */


/* ---------- Navbar ---------- */
.navbar{
  background:linear-gradient(90deg,var(--brand),#9a674d);
}
.navbar .navbar-brand{
  color:#fff; font-weight:700; letter-spacing:.3px;
}

/* ---------- Page Header ---------- */
.page-title{ color:var(--brand); }
.guide-badge{
  background:var(--accent);
  color:#fff;
  font-weight:600;
  border-radius:999px;
}

/* ---------- Guide Card ---------- */
.guide-card{
  /* Rounded, clipped container so the image corners match */
  border:0;
  background:var(--card-bg);
  border-radius:16px;
  overflow:hidden;

  /* Layout */
  display:flex;
  flex-direction:column;
  height:100%;

  /* Subtle motion */
  box-shadow:var(--soft-shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.guide-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--lift-shadow);
}
.guide-card:focus-within{
  outline:2px solid color-mix(in oklab, var(--accent) 60%, #fff);
  outline-offset:2px;
}

/* ---------- Image Slot (Fixed 16:9, Cover, Perfect Fit) ---------- */
.guide-thumb-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;        /* keeps all cards equal height */
  background:#efe7da;       /* pleasant placeholder if image is slow */
}
.guide-thumb{
  width:100%;
  height:100%;
  object-fit:cover;         /* fill the box; crops overflow cleanly */
  object-position:center;   /* keep subject centered */
  display:block;
  transform:scale(1.001);   /* fixes subpixel gaps on some GPUs */
  transition:transform .3s ease;
}
.guide-card:hover .guide-thumb{ transform:scale(1.03); }

/* Optional variants */
.guide-thumb.fit-contain{ object-fit:contain; background:#fff; }
.guide-thumb.top{ object-position:50% 20%; }
.guide-thumb.bottom{ object-position:50% 80%; }

/* ---------- Card Body ---------- */
.guide-title{
  color:var(--brand);
  font-weight:800;
  line-height:1.2;
  font-size:clamp(1.05rem, 1rem + .6vw, 1.25rem);
  margin-bottom:.25rem;
}
.guide-desc{ color:#4e4e4e; }

/* Tag chips */
.tag{
  font-size:.75rem;
  color:#5f5f5f;
  background:#f2eade;
  border-radius:999px;
  padding:.25rem .6rem;
  white-space:nowrap;
}

/* ---------- Utilities ---------- */
.footer-note{ color:#6b6b6b; }

/* Improve touch targets for stretched links inside cards */
.card .stretched-link::after{ border-radius:16px; }

/* ---------- Responsive Tweaks ---------- */
@media (max-width: 575.98px){
  .guide-card{ box-shadow:0 4px 12px rgba(0,0,0,.05); }
  .guide-title{ font-size:1.05rem; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  .guide-card,
  .guide-thumb{ transition:none !important; }
}