/* ============================================
   OWNER GUIDES SECTION — scoped under .bc-page,
   reuses --bc-navy / --bc-gold / --bc-ice tokens
   already defined by homepage.css. Loaded only
   on owner-guides.php, article.php and the
   checklist page.
   ============================================ */

.og-breadcrumb{font-size:.85rem;color:var(--bc-muted);margin-bottom:1.5rem}
.og-breadcrumb a{text-decoration:underline;text-underline-offset:3px}
.og-breadcrumb span{margin:0 .4rem}

.og-intro{max-width:70ch}

/* ---- Featured guide ---- */
.og-featured{background:var(--bc-navy);color:#fff;padding:2.5rem;margin:2.5rem 0;border-left:4px solid var(--bc-gold)}
.og-featured .og-eyebrow{color:#e3c96e;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:.75rem}
.og-featured h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.75rem}
.og-featured p{color:rgba(255,255,255,.8);margin-bottom:1.25rem;max-width:65ch}

/* ---- Filters ---- */
.og-filters{display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0}
.og-filters a{display:inline-block;padding:.5rem 1rem;border:1px solid #b8c6d0;text-decoration:none;font-size:.88rem;color:var(--bc-navy);background:#fff}
.og-filters a.is-active{background:var(--bc-navy);color:#fff;border-color:var(--bc-navy)}
.og-filters a:hover{border-color:var(--bc-navy)}

/* ---- Card grid ---- */
.og-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.75rem;margin:1.5rem 0 2.5rem}
.og-card{display:flex;flex-direction:column;border-top:3px solid var(--bc-gold);padding-top:1.25rem}
.og-card-cat{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--bc-muted);margin-bottom:.5rem}
.og-card h3{font-size:1.2rem;margin-bottom:.6rem}
.og-card h3 a{text-decoration:none}
.og-card h3 a:hover{text-decoration:underline}
.og-card p{font-size:.95rem;color:var(--bc-muted);margin-bottom:1rem;flex:1}
.og-card .og-card-link{font-size:.88rem;font-weight:700;text-decoration:none;text-underline-offset:3px}
.og-card .og-card-link:hover{text-decoration:underline}
.og-card[hidden]{display:none}

/* ---- Checklist CTA panel ---- */
.og-checklist-panel{background:var(--bc-ice);border:1px solid #cddbe6;padding:2rem;margin:2.5rem 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.og-checklist-panel h3{margin-bottom:.4rem;font-size:1.3rem}
.og-checklist-panel p{margin:0;max-width:55ch;color:var(--bc-muted)}
.og-checklist-panel .bc-button{flex-shrink:0}

/* ---- Article page ---- */
.og-article-header{max-width:72ch}
.og-article-cat{display:inline-block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--bc-gold);background:var(--bc-navy);padding:.3rem .7rem;margin-bottom:1rem}
.og-article-meta{font-size:.85rem;color:var(--bc-muted);margin-bottom:1.5rem}
.og-article-body{max-width:70ch;font-size:1.05rem;line-height:1.75}
.og-article-body h2{font-size:1.35rem;margin:2.25rem 0 .9rem;padding-bottom:.5rem;border-bottom:2px solid var(--bc-ice)}
.og-article-body p{margin:0 0 1.1rem}
.og-try-this{background:var(--bc-ice);border-left:4px solid var(--bc-gold);padding:1.25rem 1.5rem;max-width:70ch;margin:2rem 0}
.og-try-this p{margin:0}
.og-sources{max-width:70ch;font-size:.88rem;color:var(--bc-muted);margin:1.5rem 0 2.5rem;padding-top:1rem;border-top:1px solid #dde6ee}
.og-sources h2{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem;border:0;padding:0}
.og-sources li{margin-bottom:.5rem}
.og-sources a{text-decoration:underline;text-underline-offset:3px}

.og-related{margin:2.5rem 0}
.og-related h2{font-size:1.2rem;margin-bottom:1.25rem}
.og-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.og-related-grid .og-card{border-top-width:3px}

.og-back-link{display:inline-block;margin-top:1rem;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}

/* ---- Checklist page ---- */
.og-checklist-actions{display:flex;flex-wrap:wrap;gap:1rem;margin:1.5rem 0 2.5rem}
.og-checklist-group{margin-bottom:2.25rem}
.og-checklist-group h2{font-size:1.15rem;margin-bottom:.9rem;padding-bottom:.4rem;border-bottom:2px solid var(--bc-ice)}
.og-checklist-list{list-style:none;padding:0;margin:0}
.og-checklist-list li{display:flex;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--bc-ice);font-size:.98rem}
.og-checklist-list li::before{content:'';flex-shrink:0;width:18px;height:18px;margin-top:.15rem;border:1.5px solid var(--bc-muted)}
.og-exercise{background:var(--bc-ice);padding:1.75rem;margin:2rem 0}
.og-exercise-field{border-bottom:1px solid #b8c6d0;padding:.5rem 0;margin-bottom:.75rem;color:var(--bc-muted);font-size:.9rem}

@media print{
  nav, .mobile-menu, .bc-footer, .bc-cookie, .og-checklist-actions, .og-breadcrumb, .intro-overlay, dialog { display:none !important; }
  .bc-page { font-size: 12pt; color:#000; }
  a { color:#000; text-decoration:underline; }
  .og-checklist-group { break-inside: avoid; }
}

@media (max-width:700px){
  .og-featured{padding:1.75rem}
  .og-checklist-panel{flex-direction:column;align-items:flex-start}
}

/* Owner Guides card refresh */

#ogGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.5rem;
  margin: 1.5rem 0 2.5rem;
}

#ogGrid .og-card {
  --og-accent: #245b85;
  --og-tint: #f3f7fb;
  --og-badge: #e2edf7;
  --og-border: #ccddeb;

  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--og-border);
  border-top: 4px solid var(--og-accent);
  border-radius: 16px;
  background: var(--og-tint);
  box-shadow: 0 4px 16px rgb(15 30 45 / 4%);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

/* Preserve category filtering */
#ogGrid .og-card[hidden] {
  display: none !important;
}

/* Category palettes */

#ogGrid .og-card[data-category="bookings-listings"] {
  --og-accent: #805c16;
  --og-tint: #fcf8ef;
  --og-badge: #f4e8c9;
  --og-border: #e6d7b7;
}

#ogGrid .og-card[data-category="property-care"] {
  --og-accent: #2d6953;
  --og-tint: #f2f8f4;
  --og-badge: #deeee4;
  --og-border: #cbded2;
}

/* Category badge */

#ogGrid .og-card > .og-card-cat {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.55rem;
  max-width: 100%;
  margin: 0 0 1.25rem;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  background: var(--og-badge);
  color: var(--og-accent);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

/* Decorative shapes supplement the category text */

#ogGrid .og-card-cat::before {
  content: "";
  display: block;
  flex: 0 0 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  background: currentColor;
  border-radius: 50%;
}

#ogGrid [data-category="bookings-listings"]
  .og-card-cat::before {
  border-radius: 1px;
  transform: rotate(45deg);
}

#ogGrid [data-category="property-care"]
  .og-card-cat::before {
  border-radius: 2px;
}

/* Titles */

#ogGrid .og-card > h3 {
  margin: 0 0 0.85rem;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

#ogGrid .og-card > h3 a {
  color: var(--og-accent);
  text-decoration: none;
}

#ogGrid .og-card > h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Descriptions */

#ogGrid .og-card > p:not(.og-card-cat) {
  margin: 0 0 1.5rem;
  color: #435366;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Reading links sit at the bottom of each card */

#ogGrid .og-card > .og-card-link {
  display: block;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--og-border);
  color: var(--og-accent);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

#ogGrid .og-card > .og-card-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

#ogGrid .og-card a:focus-visible {
  outline: 3px solid var(--og-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Subtle interaction */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #ogGrid .og-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgb(15 30 45 / 9%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #ogGrid .og-card {
    transition: none;
  }
}

/* Responsive layout */

@media (max-width: 1000px) {
  #ogGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #ogGrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  #ogGrid .og-card {
    padding: 1.25rem;
  }
}

/* Refine Owner Guides cards */

#ogGrid .og-card {
  background: #fff;
  border: 1px solid #dfe3e7;
  border-top: 3px solid var(--og-accent);
  border-radius: 3px;
  box-shadow: none;
  transition: all 1s;
}

/* Plain category labels with consistent spacing */

#ogGrid .og-card > .og-card-cat {
  flex: 0 0 auto;
  min-height: 2.8em;
  height: auto;
  margin: 0 0 1rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* Explicitly size both heading and link */

#ogGrid .og-card > h3,
#ogGrid .og-card > h3 > a {
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

#ogGrid .og-card > h3 {
  flex: 0 0 auto;
  margin: 0 0 0.85rem;
  padding: 0;
}

#ogGrid .og-card > h3 > a {
  display: block;
}

/* Consistent body copy */

#ogGrid .og-card > p:not(.og-card-cat) {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #435366;
}

/* Quiet divider and aligned reading links */

#ogGrid .og-card > .og-card-link {
  border-top-color: #e5e7eb;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

/* No lifting or shadow on hover */

#ogGrid .og-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--og-accent);
}

/* Pill navigation — works with your existing PHP links */

#ogFilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#ogFilters > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0.6rem 1rem;
  border: 1px solid #dfe5ea;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  color: #435366;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

#ogFilters > a:hover {
  background: #f4f6f8;
  border-color: #aab7c3;
}

#ogFilters > a.is-active {
  background: #132c43;
  border-color: #132c43;
  color: #fff;
}

#ogFilters > a:focus-visible {
  outline: 2px solid #245b85;
  outline-offset: 3px;
}

/* Category shapes */

#ogFilters > a:not([data-category="all"])::before {
  content: "";
  display: block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  background: #245b85;
  border-radius: 50%;
}

#ogFilters > a[data-category="bookings-listings"]::before {
  background: #805c16;
  border-radius: 1px;
  transform: rotate(45deg);
}

#ogFilters > a[data-category="property-care"]::before {
  background: #2d6953;
  border-radius: 2px;
}

#ogFilters > a.is-active::before {
  background: #fff;
}

/* Cards retain their existing appearance */

#ogGrid .og-card {
  border-radius: 3px;
  transition: none;
}

#ogGrid .og-card[hidden] {
  display: none !important;
}

#ogGrid .og-card:hover {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #ogFilters > a {
    transition: none;
  }
}