/**
 * v3 — Cruise Guide (blog index).
 *
 * cruise-guide.html ships one stylesheet for the whole site; these are the
 * rules whose leading class base.css does not already define, filtered to the
 * ones this page's own markup uses. The shell — header, footer, hero, inquiry,
 * reviews, season and tips — is all base.css and is not repeated here.
 */

.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:960px){
  .posts{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .posts{grid-template-columns:1fr;}
}
.post{background:#fff; border:1.5px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s;}
.post:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.post:hover .ph{transform:scale(1.04);}
.post.hide{display:none;}
.p-img{position:relative; height:180px; overflow:hidden; display:block;}
.p-img .cat{position:absolute; z-index:2; top:12px; inset-inline-start:12px; background:#fff; color:var(--petrol-dark); font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:99px;}
.p-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1;}
.p-meta{display:flex; gap:10px; font-size:.72rem; font-weight:700; color:var(--muted);}
.p-meta span{display:inline-flex; align-items:center; gap:4px;}
.p-meta .ico{width:12px; height:12px; color:var(--teal);}
.post h3{font-size:1.05rem;}
.post h3 a:hover{color:var(--petrol);}
.post p{font-size:.86rem; color:var(--ink-soft);}
.p-foot{margin-top:auto; padding-top:10px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
.p-foot a{font-weight:800; font-size:.84rem; color:var(--petrol); display:inline-flex; align-items:center; gap:5px;}
.p-foot a:hover{color:var(--orange);}
.p-foot a .ico{width:14px; height:14px;}
.p-foot small{font-size:.72rem; color:var(--muted); font-weight:600;}
.feat-post{display:grid; grid-template-columns:1.1fr .9fr; gap:0; background:var(--petrol-deep); color:#fff; border-radius:20px; overflow:hidden; margin-bottom:26px;}
@media(max-width:860px){
  .feat-post{grid-template-columns:1fr;}
}
.fp-img{position:relative; min-height:300px; overflow:hidden;}
.fp-body{padding:30px; display:flex; flex-direction:column; gap:12px; justify-content:center;}
.fp-body .kicker{color:#F4CD79;}
.fp-body .kicker::before{background:#F4CD79;}
.fp-body h2{font-size:clamp(1.4rem,2.4vw,1.9rem); color:#fff;}
.fp-body p{color:#CFE1E7; font-size:.95rem;}
.fp-body .p-meta{color:#9FB9C2;}
.fp-body .p-meta .ico{color:#F4CD79;}
.fp-body .btn{align-self:flex-start; margin-top:6px;}
.qa{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
@media(max-width:960px){
  .qa{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .qa{grid-template-columns:1fr;}
}
.qa a{background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:16px; display:flex; gap:12px; align-items:flex-start; transition:border-color .2s, box-shadow .2s;}
.qa a:hover{border-color:var(--petrol); box-shadow:var(--shadow);}
.qa .ico{width:18px; height:18px; color:var(--petrol); background:var(--petrol-soft); padding:8px; box-sizing:content-box; border-radius:10px; flex:none;}
.qa b{display:block; font-size:.9rem;}
.qa small{font-size:.76rem; color:var(--muted); font-weight:600;}

/* The featured guide's picture and headline are links as well as the button.
   A reader who clicks the photograph or the title expects to open the guide,
   and only the button did. The image link is hidden from assistive tech
   because the headline beside it already says where it goes. */
.feat-post .fp-img{display:block; text-decoration:none;}
.feat-post h2 a{color:inherit; text-decoration:none;}
.feat-post h2 a:hover{text-decoration:underline; text-underline-offset:4px;}