/* ============================================================
   JOURNAL — article header, byline, topic tags, rounded hero
   Loaded after enhance.css so it wins where it overlaps.
   ============================================================ */

/* --- Article meta header (sits above the rounded heading image) --- */
.article-head{ max-width:760px; margin:0 auto 22px; }

.article-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.article-tags .tag{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px 7px 12px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  font-family:var(--sans);
  font-size:12px; font-weight:600; letter-spacing:0.02em;
  color:var(--navy);
  line-height:1;
}
.article-tags .tag svg{ width:14px; height:14px; color:var(--sea-fresh-deep,#15727F); stroke-width:2.4; }

/* --- Byline row: author + reading time + date --- */
.article-byline{
  display:flex; align-items:center; gap:18px 22px; flex-wrap:wrap;
  padding-bottom:0;
}
.article-byline .author{ display:flex; align-items:center; gap:11px; }
.article-byline .author-icon{
  width:42px; height:42px; border-radius:50%;
  background:var(--navy);
  display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:15px;
  color:var(--cream);
  flex-shrink:0;
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--line);
}
.article-byline .byline-name{ display:flex; flex-direction:column; line-height:1.25; }
.article-byline .byline-name b{ font-family:var(--sans); font-weight:700; font-size:14px; color:var(--ink); }
.article-byline .byline-name small{ font-size:12px; color:var(--muted); font-weight:500; }

.article-byline .dot{ width:4px; height:4px; border-radius:50%; background:var(--line-strong); }
.article-byline .byline-item{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--muted);
}
.article-byline .byline-item svg{ width:17px; height:17px; color:var(--sea-fresh-deep,#15727F); stroke-width:2; flex-shrink:0; }

/* --- Rounded heading image (replaces the old full-bleed .image-band) --- */
.article-hero{
  max-width:980px; margin:0 auto 14px; padding:0;
}
.article-hero image-slot{
  display:block; width:100%;
  height:clamp(280px, 40vw, 520px);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(15,27,51,0.45);
}
.article-hero figcaption{
  max-width:760px; margin:14px auto 0;
  font-size:13px; color:var(--muted); font-style:italic; line-height:1.5;
  display:flex; align-items:center; gap:8px;
}
.article-hero figcaption svg{ width:14px; height:14px; color:var(--sea-fresh-deep,#15727F); stroke-width:2.2; flex-shrink:0; }

/* space between the heading image and the article body */
.article-body{ margin-top:40px; }

@media (max-width:720px){
  .article-hero image-slot{ border-radius:20px; height:clamp(220px,52vw,340px); }
  .article-byline{ gap:14px 18px; }
  .article-head{ margin-bottom:18px; }
}

/* ============================================================
   BLOG INDEX — inline "Bring the Adriatic closer" separator band
   (moved out from directly above the footer)
   ============================================================ */
.journal-break{
  position:relative; overflow:hidden;
  border-radius:var(--radius-card);
  margin:10px 0 40px;
  padding:clamp(48px,6vw,72px) clamp(28px,5vw,72px);
  color:#fff;
  background-color:var(--navy-deep,#1A2C54);
  background-image:
    linear-gradient(150deg, rgba(15,27,51,0.86) 0%, rgba(15,27,51,0.60) 52%, rgba(21,114,127,0.74) 100%),
    var(--cta-img);
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
.journal-break-inner{
  display:grid; grid-template-columns:1.3fr 0.9fr; gap:32px; align-items:center;
  max-width:1100px; margin:0 auto;
}
.journal-break .jb-kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.72); margin-bottom:16px;
}
.journal-break .jb-kicker svg{ width:16px; height:16px; stroke-width:2.2; color:var(--gold); }
.journal-break h2{
  font-family:var(--display); font-size:clamp(30px,3.4vw,44px); font-weight:700;
  letter-spacing:-0.025em; line-height:1.02; margin:0; color:#fff;
}
.journal-break h2 .italic-accent{ font-style:italic; font-weight:500; color:rgba(255,255,255,0.62); }
.journal-break .jb-right{ display:flex; flex-direction:column; gap:16px; }
.journal-break .jb-right p{ font-size:16px; line-height:1.6; color:rgba(255,255,255,0.86); margin:0; }
.journal-break .jb-actions{ display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:820px){
  .journal-break-inner{ grid-template-columns:1fr; gap:22px; }
}

/* inline icon alignment on blog index cards */
.blog-featured .read-time{ display:inline-flex; align-items:center; gap:7px; }
.blog-featured .read-time svg{ color:var(--sea-fresh-deep,#15727F); }
.post .meta{ display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; }
.post .meta svg{ color:var(--sea-fresh-deep,#15727F); }
.post .meta .m-date, .blog-featured .meta-top .m-date{ display:inline-flex; align-items:center; gap:6px; }
.post .meta .m-date svg, .blog-featured .meta-top .m-date svg{ color:var(--navy); }
.post .meta .m-date strong, .blog-featured .meta-top .m-date strong{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; color:var(--navy); font-size:13px; letter-spacing:-0.01em; }
.meta-sep{ color:var(--muted); opacity:0.5; }
.post .author{ margin-top:16px; }
.post .author .author-name{ font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; color:var(--ink); }
.post .author .author-role{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.blog-featured .author .author-name{ font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; color:var(--ink); }
.blog-featured .author .author-role{ font-size:12px; color:var(--muted); margin-top:1px; }
.journal-break{ margin:10px 0 40px; }

/* ============================================================
   JOURNAL INDEX — clickable affordance
   A small circular "open" arrow badge on every card corner so
   it reads as clickable. Replaces the featured "Read the guide"
   button with the same compact indicator. Whole grid card is a link.
   ============================================================ */
a.post{ color:inherit; text-decoration:none; }
.post .photo, .blog-featured .photo{ position:relative; }

.card-go{
  position:absolute; top:14px; right:14px; z-index:3;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--paper); color:var(--navy);
  border:1px solid var(--line-strong);
  box-shadow:0 8px 20px -10px rgba(15,27,51,0.55);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),
             background .3s ease, color .3s ease, border-color .3s ease;
  pointer-events:none;
}
.card-go svg{ width:16px; height:16px; stroke-width:2.2;
  transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.blog-featured .card-go{ top:18px; right:18px; width:44px; height:44px; }
.blog-featured .card-go svg{ width:17px; height:17px; }

.post:hover .card-go,
.blog-featured:hover .card-go{
  background:var(--navy); color:var(--cream); border-color:var(--navy);
  transform:translateY(-3px);
}
.post:hover .card-go svg,
.blog-featured:hover .card-go svg{ transform:translate(2px,-2px); }

/* linked featured title inherits the card colour; subtle underline on card hover */
.blog-featured h3 a{ color:inherit; text-decoration:none; }
.blog-featured:hover h3 a{
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px; text-decoration-color:var(--line-strong);
}

@media (prefers-reduced-motion: reduce){
  .card-go, .card-go svg{ transition:none !important; }
}