/* ===== HarborWay Blog CSS — rebuild 2025-10-31 ===== */

/* Brand vars */
:root{
  --hwf-blue:#1C3A58;
  --hwf-teal:#357F9F;
  --hwf-sand:#E4B77C;
  --hwf-seashell:#F9F5F1;
  --hwf-gray:#E5E7EB;
  --hwf-white:#FFFFFF;
}

/* ---------------- BLOG INDEX ---------------- */
.blog-index{ max-width:1200px; margin:0 auto; padding:40px 20px; }
.blog-index .title{ margin:0 0 6px; }
.blog-index .subtitle{ margin:6px 0 24px; color:#4b5563; font-size:22px; line-height:1.35; font-weight:600; }
@media(max-width:640px){ .blog-index .subtitle{ font-size:18px; margin-bottom:28px; } }

/* Hero wrapper: scales with zoom via aspect-ratio, with sensible caps */
.blog-index .hero{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  max-height:360px;   /* desktop cap so it never dominates */
  min-height:220px;   /* keeps presence on small screens */
  overflow:hidden;
  border-radius:12px;
  background:#fff;
}

/* Hero image: centered crop. Adjust second value to raise or lower framing */
.blog-index .hero > img,
.blog-index .hero picture > img,
.blog-index .hero .wp-post-image,
.blog-index .hero .thumb > img,
.blog-index .hero .wp-block-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
  border-radius:12px;
}

/* Overlay panel is disabled to avoid covering artwork text */
.blog-index .hero-content{ display:none !important; }

/* Mobile title panel under hero */
.mobile-meta{ display:none; }
@media(max-width:640px){
  .mobile-meta{ display:block; margin-top:12px; padding:0 2px; text-align:left; }
  .mobile-meta h3{ margin:0 0 6px; font-size:20px; line-height:1.25; font-weight:700; color:var(--hwf-blue); }
  .mobile-meta .hwf-btn{ padding:10px 14px; }
}

/* Desktop title panel under hero, left aligned, larger than grid cards */
@media(min-width:1024px){
  .mobile-meta{
    display:block !important;
    width:100%;
    max-width:none;
    margin:14px 0 0;
    padding:0;
    background:none;
    border-radius:0;
    color:var(--hwf-blue);
    text-align:left;
  }
  .mobile-meta h3{
    color:var(--hwf-blue);
    font-weight:700;
    font-size:clamp(26px, 2.8vw, 34px); /* hero title bigger than card titles */
    line-height:1.25;
    margin:0 0 8px;
  }
  .mobile-meta .byline{ color:#6b7280; }
}

/* Filters */
.controls{ display:grid; grid-template-columns:240px 1fr auto; gap:12px; align-items:center; margin:18px 0 12px; }
@media(max-width:700px){ .controls{ grid-template-columns:1fr; } }
.controls select,
.controls input[type=search]{ border:1px solid var(--hwf-gray); border-radius:10px; padding:10px 12px; background:#fff; font:inherit; color:var(--hwf-blue); }
.blog-index .controls form{ margin:0; }

/* Buttons */
.hwf-btn{ display:inline-block; padding:12px 18px; border-radius:10px; text-decoration:none; font-weight:600; border:1px solid var(--hwf-blue); }
.hwf-btn.primary{ background:var(--hwf-blue); color:#fff; }
.hwf-btn.secondary{ background:var(--hwf-sand); color:var(--hwf-blue); border-color:var(--hwf-sand); }

/* Grid */
.blog-index .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:1024px){ .blog-index .grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .blog-index .grid{ grid-template-columns:1fr; gap:16px; } }
.blog-index .card{ display:flex; flex-direction:column; border:1px solid var(--hwf-gray); border-radius:12px; overflow:hidden; background:#fff; }
.blog-index .card .thumb{ display:block; aspect-ratio:16/9; background:#f6f6f6; }
.blog-index .card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-index .card .content{ padding:16px; display:grid; gap:8px; }
.blog-index .card .meta{ font-size:14px; color:#6b7280; }
.blog-index .card .post-title{ margin:0; font-size:20px; }
.blog-index .card .excerpt{ margin:0; color:#374151; }

/* Compact Read more buttons on cards */
.blog-index .grid .card .content a.hwf-btn,
.blog-index .grid .card .content .hwf-btn,
.blog-index .grid .card a.more-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:160px;
  min-width:0;
  padding:8px 14px;
  font-size:15px;
  line-height:1.1;
  border-radius:8px;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
}
.blog-index .grid .card .content a{ display:inline-flex; width:auto; }

/* ---------------- SINGLE POST ---------------- */
.article{ max-width:780px; margin:0 auto; padding:20px 16px; }

/* Single hero container and image, same responsive behavior */
.article .article-hero{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  max-height:360px;
  min-height:220px;
  margin:8px 0 20px;
  border-radius:12px;
  overflow:hidden;
  background:var(--hwf-seashell);
}
.article .article-hero img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center; /* change to 50% 40% if you want it a touch higher */
  border-radius:12px;
}

/* Title hierarchy on single posts */
.single .article .article-title{
  font-size:clamp(30px, 3.4vw, 42px);
  line-height:1.2;
  font-weight:800;
  color:var(--hwf-blue);
  margin:16px 0 10px;
  display:block;
  clear:both;
}
.single .byline{ margin:6px 0 16px; color:#6b7280; font-size:14px; }
.single .entry-content{ margin-top:8px; }

.single .entry-content h2{ font-size:clamp(22px, 2.2vw, 30px); line-height:1.25; font-weight:700; margin:1.1em 0 0.45em; color:var(--hwf-blue); }
.single .entry-content h3{ font-size:clamp(18px, 1.8vw, 24px); line-height:1.25; font-weight:600; margin:1em 0 0.4em; color:var(--hwf-blue); }

/* Keep content below hero, prevent overlap */
.single .article .article-title,
.single .article .byline,
.single .article .entry-content{ position:relative; z-index:1; clear:both; }
.single .wp-post-image{ position:static !important; z-index:0 !important; }

/* Callout styling inside posts */
.article .hwf-quote{ border-left:4px solid var(--hwf-teal); padding:12px 14px; margin:14px 0; background:var(--hwf-seashell); font-style:italic; border-radius:10px; }

/* Footer on single posts stays white on navy */
.single .site-footer,
.single .site-footer *{ color:#fff; }
.single .site-footer a:hover,
.single .site-footer a:focus{ text-decoration:underline; }

/* Utilities */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* PATCH 2025-10-31 — Desktop hero like mobile, bottom-visible framing, bigger page header */
@media (min-width: 768px) {
  /* Hero scales with zoom, not fixed px */
  .blog-index .hero {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: 340px !important;   /* adjust 300–380px to taste */
    min-height: 220px !important;
    overflow: hidden !important;
    border-radius: 12px;
  }
  /* Show more of the bottom of the image */
  .blog-index .hero > img,
  .blog-index .hero picture > img,
  .blog-index .hero .wp-post-image,
  .blog-index .hero .thumb > img,
  .blog-index .hero .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 62% !important; /* raise this toward 70% to reveal more bottom, lower toward 50% to center */
    display: block !important;
  }
  /* Kill overlay on desktop so it never hides artwork */
  .blog-index .hero-content { display: none !important; }

  /* Page header sizing to match mobile balance */
  .blog-index .title    { font-size: clamp(26px, 2.4vw, 34px) !important; line-height: 1.2; }
  .blog-index .subtitle { font-size: clamp(18px, 1.6vw, 22px) !important; margin-bottom: 20px !important; }
}

/* Keep the title panel under the hero and left aligned */
.mobile-meta { text-align: left !important; }
@media (min-width: 1024px) {
  .mobile-meta { display: block !important; margin: 12px 0 0 !important; }
  .mobile-meta h3 { font-size: clamp(24px, 2.2vw, 30px) !important; line-height: 1.25 !important; margin: 0 0 6px !important; }
}
/* PATCH 2025-10-31 — make desktop hero match mobile scale + keep title visible */

/* 1) Hero scales like mobile and shows more of the bottom */
@media (min-width: 768px) {
  .blog-index .hero {
    aspect-ratio: 16 / 9 !important;   /* same behavior as mobile */
    height: auto !important;            /* let aspect-ratio set height */
    max-height: none !important;        /* remove earlier caps that made it too short */
    min-height: 320px !important;       /* keeps presence on smaller desktops */
    overflow: hidden !important;
    border-radius: 12px;
  }
  .blog-index .hero > img,
  .blog-index .hero picture > img,
  .blog-index .hero .wp-post-image,
  .blog-index .hero .thumb > img,
  .blog-index .hero .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 62% !important; /* raise toward 68–70% to reveal more bottom if needed */
    display: block !important;
  }
  /* hide the overlay so artwork text never gets covered */
  .blog-index .hero-content { display: none !important; }
}

/* 2) Title panel stays visible and scales smoothly */
.mobile-meta { display: block !important; text-align: left !important; margin-top: 12px !important; }
.mobile-meta h3 { font-size: clamp(22px, 2.2vw, 32px) !important; line-height: 1.25 !important; margin: 0 0 6px !important; }
.mobile-meta .byline { color: #6b7280 !important; }
/* Increase size of main blog page title and subtitle */
.blog-index .title {
  font-size: clamp(36px, 3.4vw, 48px) !important;  /* was around 32–42px */
  line-height: 1.2 !important;
  font-weight: 700;
  color: var(--hwf-blue);
}

.blog-index .subtitle {
  font-size: clamp(22px, 2vw, 30px) !important;    /* was around 20–26px */
  line-height: 1.35 !important;
  color: #4b5563;
  margin-bottom: 28px !important;
}
/* PATCH: keep blog index page title and subtitle always visible on mobile */
.blog-index .title,
.blog-index .subtitle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  color: inherit !important;
}

/* Keep their sizes from earlier tweak */
.blog-index .title    { font-size: clamp(36px, 3.4vw, 48px) !important; line-height: 1.2 !important; }
.blog-index .subtitle { font-size: clamp(22px, 2vw, 30px) !important;  line-height: 1.35 !important; }

/* Extra safety: ensure the hero below cannot overlap these */
.blog-index .hero { z-index: 0 !important; }
.blog-index .title,
.blog-index .subtitle { z-index: 1 !important; }
/* PATCH — Featured hero panel below image on all devices */
.blog-index .hero-content { display: none !important; } /* keep the old overlay off */

.mobile-meta {
  display: block !important;
  margin: 12px 0 0 !important;     /* sits under the image */
  padding: 14px 16px !important;
  background: rgba(28,58,88,.90) !important;  /* blue shadow box */
  color: #fff !important;
  border-radius: 12px !important;
  text-align: left !important;
}

/* Title: slightly larger than grid card titles, but not overpowering */
.mobile-meta h3 {
  margin: 0 0 6px !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-size: clamp(20px, 2.2vw, 26px) !important; /* cards are ~20px; hero a bit larger */
  line-height: 1.25 !important;
}

/* Byline and excerpt to match card feel */
.mobile-meta .byline {
  color: rgba(255,255,255,.9) !important;
  font-size: 13px !important;
  margin: 2px 0 6px !important;
}
.mobile-meta .excerpt,
.mobile-meta p {
  color: rgba(255,255,255,.95) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  margin: 0 0 8px !important;
}

/* Button stays brand-consistent */
.mobile-meta .hwf-btn {
  background: var(--hwf-sand) !important;
  color: var(--hwf-blue) !important;
  border-color: var(--hwf-sand) !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
}

/* Links inside the panel */
.mobile-meta a,
.mobile-meta a:visited { color: #fff !important; text-decoration: none; }
.mobile-meta a:hover,
.mobile-meta a:focus   { text-decoration: underline; }
/* Featured hero panel: show excerpt between title and button, match card sizing */
.mobile-meta .excerpt,
.mobile-meta p.excerpt {
  margin: 4px 0 10px !important;
  font-size: 16px !important;        /* same feel as card text */
  line-height: 1.45 !important;
  color: rgba(255,255,255,.95) !important;  /* stays legible on blue box */
}
/* PATCH — refine featured hero shadow box */
.mobile-meta {
  background: rgba(28, 58, 88, 0.88) !important;  /* Harbor Blue (#1C3A58) with subtle transparency */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);      /* adds soft depth like the earlier look */
  border-radius: 12px !important;
  padding: 14px 16px !important;
  color: #fff !important;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* Refine featured hero overlay — Harbor Blue translucent with soft depth */
.mobile-meta {
  background: rgba(28, 58, 88, 0.78) !important;  /* slightly lighter, allows image tone through */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);      /* stronger soft shadow for subtle lift */
  border-radius: 12px !important;
  padding: 14px 16px !important;
  color: #fff !important;
}
/* PATCH — Hero panel styling to match the reference look */
.mobile-meta {
  position: relative;
  padding: 16px 18px !important;
  border-radius: 16px !important;

  /* Harbor Blue base + subtle depth */
  background: linear-gradient(
    180deg,
    rgba(28, 58, 88, 0.94) 0%,
    rgba(22, 48, 74, 0.92) 60%,
    rgba(16, 36, 56, 0.90) 100%
  ) !important;

  /* Soft outer shadow for lift and a faint edge line */
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);

  color: #fff !important;
  text-align: left !important;
  isolation: isolate; /* keeps highlight clean */
}

/* Gentle glossy highlight that wraps the upper-left curve */
.mobile-meta::before {
  content: "";
  position: absolute;
  left: 16px;
  top: -28px;
  width: 62%;
  height: 140%;
  pointer-events: none;
  border-radius: 28px;

  /* Soft radial sheen that fades out */
  background: radial-gradient(
    120% 85% at 0% 0%,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.14) 22%,
    rgba(255, 255, 255, 0.06) 46%,
    rgba(255, 255, 255, 0.02) 62%,
    rgba(255, 255, 255, 0.00) 72%
  );
  filter: blur(1.2px);
}

/* Type hierarchy inside the panel */
.mobile-meta h3 {
  margin: 0 0 6px !important;
  font-weight: 700 !important;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  line-height: 1.25 !important;
  color: #fff !important;
}
.mobile-meta .byline {
  margin: 2px 0 6px !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.90) !important;
}
.mobile-meta .excerpt,
.mobile-meta p {
  margin: 0 0 10px !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Links remain readable on the panel */
.mobile-meta a,
.mobile-meta a:visited { color: #fff !important; text-decoration: none; }
.mobile-meta a:hover,
.mobile-meta a:focus   { text-decoration: underline; }
/* PATCH — keep glossy highlight inside panel and behind text */
.mobile-meta {
  position: relative !important;
  overflow: hidden !important;     /* clips the sheen so it can't creep into the hero image */
}

.mobile-meta::before {
  z-index: 0 !important;           /* sits behind text */
  left: 10px !important;           /* keep it inside the box */
  top: 6px !important;
  width: 55% !important;           /* smaller highlight so it doesn't reach the edges */
  height: 120% !important;
  border-radius: 22px !important;
  filter: blur(0.8px) !important;
}

.mobile-meta > * {
  position: relative;
  z-index: 1;                      /* ensures title/byline/excerpt sit above the sheen */
}
/* PATCH — remove curved sheen, use even gradient that matches the box radius */
.mobile-meta {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;

  /* Even Harbor Blue gradient with depth, no weird curvature */
  background: linear-gradient(
    180deg,
    rgba(28, 58, 88, 0.92) 0%,
    rgba(28, 58, 88, 0.86) 100%
  ) !important;

  /* Soft lift and gentle inner shading for dimension */
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.32),
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -12px 24px rgba(0, 0, 0, 0.18);

  border: 1px solid rgba(255, 255, 255, 0.06);
  background-clip: padding-box;
}

/* Kill the old glossy overlay completely */
.mobile-meta::before,
.mobile-meta::after {
  display: none !important;
}
/* PATCH — deepen the Harbor Blue tone slightly */
.mobile-meta {
  background: linear-gradient(
    180deg,
    rgba(18, 40, 63, 0.94) 0%,   /* deeper start shade */
    rgba(14, 32, 52, 0.90) 100%  /* richer end shade */
  ) !important;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -12px 24px rgba(0, 0, 0, 0.22);
}
/* PATCH: make post cards the same height in Chrome and Safari */
.blog-index .grid { align-items: stretch; }
.blog-index .grid > * { min-width: 0; } /* prevent overflow wrapping differences */

.blog-index .card {
  display: flex;
  flex-direction: column;
  height: 100%;                /* stretch to equal heights */
}

.blog-index .card .thumb {
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;              /* fixed image area */
}

.blog-index .card .content {
  display: grid;
  grid-template-rows: auto auto 1fr auto;  /* meta | title | excerpt grows | button */
  gap: 8px;
  height: 100%;
}

.blog-index .card .meta { align-self: start; }
.blog-index .card .post-title { line-height: 1.25; }
.blog-index .card .excerpt { margin: 0; }  /* consistent spacing */

.blog-index .card .content .hwf-btn,
.blog-index .card a.more-link {
  align-self: end;             /* button locks to bottom row */
  justify-self: start;
}
/* PATCH: normalize card layout in Chrome to match Safari */
.blog-index .grid { align-items: stretch; }

/* Make each card a vertical flex box */
.blog-index .card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Fix the media area height */
.blog-index .card .thumb {
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
}

/* Content uses flex so the button can pin to the bottom */
.blog-index .card .content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 8px;
}

/* Let the excerpt take the flexible space */
.blog-index .card .excerpt {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

/* Pin the button to the bottom-left */
.blog-index .card .content .hwf-btn,
.blog-index .card a.more-link {
  margin-top: auto !important;
  align-self: flex-start !important;
}

/* Small safety so long titles do not push layouts off */
.blog-index .card .post-title {
  line-height: 1.25;
  overflow-wrap: anywhere;
}
/* Optional: keep excerpts the same height for perfect alignment */
.blog-index .card .excerpt {
  max-height: 5.5em;   /* about 3–4 lines of text */
  overflow: hidden;    /* hides anything beyond that height */
}
/* PATCH: make post cards equal-height and aligned in Chrome */

/* 1) Stretch all items in the grid and give each row a uniform track */
.blog-index .grid {
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;      /* rows behave uniformly */
}

/* 2) Each card fills its grid cell and stacks vertically */
.blog-index .card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
}

/* 3) Fixed media area; consistent image size */
.blog-index .card .thumb {
  aspect-ratio: 16 / 9 !important;
  flex: 0 0 auto !important;
}
.blog-index .card .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 4) Content column: excerpt flexes, button pins to bottom */
.blog-index .card .content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 8px !important;
  min-height: 0 !important;            /* avoid overflow quirks in Chrome */
}

/* Reserve consistent space for titles so wrapping doesn’t shift buttons */
.blog-index .card .post-title {
  line-height: 1.25 !important;
  min-height: 2.6em !important;        /* ~2 lines reserved */
  overflow-wrap: anywhere;
  margin: 0 !important;
}

/* Excerpt grows to fill; clamp to keep rows even */
.blog-index .card .excerpt {
  flex: 1 1 auto !important;
  margin: 0 !important;
  max-height: 5.5em !important;        /* ~3–4 lines */
  overflow: hidden !important;
}

/* Button always sits on the bottom-left */
.blog-index .card .content .hwf-btn,
.blog-index .card a.more-link {
  margin-top: auto !important;
  align-self: flex-start !important;
}
/* PATCH: force uniform 16:9 image area in cards (Chrome + Safari) */
.blog-index .card .thumb {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Make the image fill the 16:9 box regardless of its intrinsic size */
.blog-index .card .thumb img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  display: block !important;
}