/* Mobile layout for the 15 article / guide pages.
   Linked with media="(max-width: 768px)", so none of this can reach desktop. */

/* ============ TEXT RHYTHM ============ */
body{font-size:15.5px;line-height:1.6}
p{line-height:1.6}
.hero{padding:34px 16px 28px}
.hero-eyebrow{margin-bottom:12px}
.hero h1{margin-bottom:14px}
.hero-sub{font-size:0.98rem;line-height:1.55;margin-bottom:20px}
.hero-stats{gap:12px 14px;margin-bottom:22px}
.hero-btns{gap:10px}
.hero-btns a{padding:12px 16px}
.section-eyebrow{margin-bottom:4px}
.section-title{font-size:1.75rem;margin-bottom:6px}
.trust-bar{padding:10px 14px;gap:6px 14px;font-size:0.78rem}

/* ============ SECTION SPACING ============ */
body>.section,body>.intro,body>.island-intro,body>.route-highlight,body>[class$="-section"]{
  padding-top:32px!important;padding-bottom:32px!important;padding-left:16px!important;padding-right:16px!important}
body>.cta-section{padding:36px 16px!important}
body>.cta-section h2{font-size:2.2rem}
body>.cta-section p{margin-bottom:20px}
/* sections whose padding is set inline */
body>div[style*="padding:48px 32px"],body>div[style*="padding:56px 32px"],
body>div[style*="padding: 70px 32px"],body>div[style*="padding:70px 32px"]{padding:32px 16px!important}
body>div[style*="max-width:800px;margin:0 auto;padding:56px 32px"]{padding:32px 16px!important}
body>div[style*="padding:32px;"]{padding:24px 16px!important}
/* quick-answer callout boxes */
body>div[style*="padding:20px 28px"]{padding:14px 16px!important;margin-left:16px!important;margin-right:16px!important}
.quick-answer{padding:14px 16px}
.faq-item{padding:14px 0}
.faq-q{font-size:0.95rem;margin-bottom:6px}
.faq-a{font-size:0.9rem;line-height:1.6}

/* ============ CARD GRIDS: 2-up instead of one long column ============ */
.how-steps,.spots-grid,.why-grid,.reviews-grid,.rides-grid,.tips-grid,.wildlife-grid,
.scenarios-grid,.routes-grid,.route-grid,.reach-grid,.pack-grid,.neighborhoods-grid,
.hotels-grid,.from-grid,.fat-grid,.facts-grid,.ebike-grid,.day-grid,.compare-grid,
.cards-grid,.beaches-grid,.advantage-grid,.bird-grid,.times-grid,.route-both,
.why-points,.island-facts,.shark-tips,.fossil-facts,.romantic-ideas,
body [style*="repeat(auto-fit"],body [style*="repeat(auto-fill"]{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:18px}
.how-steps{gap:6px!important}

/* grid children must be allowed to shrink, and a lone last card fills its row */
:is(.how-steps,.spots-grid,.why-grid,.reviews-grid,.rides-grid,.tips-grid,.wildlife-grid,
.scenarios-grid,.routes-grid,.route-grid,.reach-grid,.pack-grid,.neighborhoods-grid,
.hotels-grid,.from-grid,.fat-grid,.facts-grid,.ebike-grid,.day-grid,.compare-grid,
.cards-grid,.beaches-grid,.advantage-grid,.bird-grid,.times-grid,.route-both,
.why-points,.island-facts,.shark-tips,.fossil-facts,.romantic-ideas,.morning-grid,
.pricing-compare,.vs-grid,[style*="repeat(auto-fit"],[style*="repeat(auto-fill"])>*{min-width:0}
:is(.how-steps,.spots-grid,.why-grid,.reviews-grid,.rides-grid,.tips-grid,.wildlife-grid,
.scenarios-grid,.routes-grid,.route-grid,.reach-grid,.pack-grid,.neighborhoods-grid,
.hotels-grid,.from-grid,.fat-grid,.facts-grid,.ebike-grid,.day-grid,.compare-grid,
.cards-grid,.beaches-grid,.advantage-grid,.bird-grid,.route-both,
.why-points,.island-facts,.shark-tips,.fossil-facts,.romantic-ideas,
[style*="repeat(auto-fit"],[style*="repeat(auto-fill"])>:last-child:nth-child(odd){grid-column:1/-1}

/* card padding sized for a half-width column */
.how-step,.spot-card,.why-card,.review-card,.ride-card,.tip-card,.scenario-card,.route-card,
.reach-card,.pack-card,.neighborhood-card,.hotel-card,.from-card,.fat-card,.fact-card,
.ebike-card,.compare-card,.advantage-card,.page-card,.why-point,.island-fact,.shark-tip,
.fossil-fact,.romantic-idea,.route-side,.bird-card,.route-grid>.route-stop{padding:13px 11px!important;border-radius:10px}
[style*="repeat(auto-fit"]>*,[style*="repeat(auto-fill"]>*{padding:13px 11px!important}
/* icon + text rows become icon-over-text so the text gets the full card width */
.reach-card,.why-point,.island-fact,.shark-tip{flex-direction:column;gap:6px}
.bird-card-top{flex-direction:column;gap:4px}
.route-grid>.route-stop{display:block}

/* card text */
:is(.how-steps,.spots-grid,.why-grid,.reviews-grid,.rides-grid,.tips-grid,.wildlife-grid,
.scenarios-grid,.routes-grid,.route-grid,.reach-grid,.pack-grid,.neighborhoods-grid,
.hotels-grid,.from-grid,.fat-grid,.facts-grid,.ebike-grid,.day-grid,.compare-grid,
.cards-grid,.beaches-grid,.advantage-grid,.bird-grid,.route-both,
.why-points,.island-facts,.shark-tips,.fossil-facts,.romantic-ideas,
[style*="repeat(auto-fit"],[style*="repeat(auto-fill"]) :is(h3,h4){font-size:1rem;line-height:1.25;margin-bottom:5px}
:is(.how-steps,.spots-grid,.why-grid,.reviews-grid,.rides-grid,.tips-grid,.wildlife-grid,
.scenarios-grid,.routes-grid,.route-grid,.reach-grid,.pack-grid,.neighborhoods-grid,
.hotels-grid,.from-grid,.fat-grid,.facts-grid,.ebike-grid,.day-grid,.compare-grid,
.cards-grid,.beaches-grid,.advantage-grid,.bird-grid,.route-both,
.why-points,.island-facts,.shark-tips,.fossil-facts,.romantic-ideas,
[style*="repeat(auto-fit"],[style*="repeat(auto-fill"]) :is(p,li,[class$="-desc"],[class$="-text"]){font-size:0.84rem;line-height:1.5}
.bird-name{font-size:1rem}
.bird-latin{font-size:0.74rem}
.bird-season{font-size:0.64rem;padding:2px 8px}
.bird-desc{margin-bottom:6px}
.bird-where{font-size:0.76rem;line-height:1.4}
.spot-card h3,.beach-name,.day-title,.wildlife-name{font-size:1.15rem}
.spot-icon,.wildlife-icon,[class*="-card"]>[class$="-icon"]{font-size:1.45rem;margin-bottom:6px}
.how-num{font-size:2rem;margin-bottom:4px}
.review-stars{font-size:0.85rem;margin-bottom:6px;letter-spacing:1px}
.review-text{font-size:0.84rem;line-height:1.5;margin-bottom:8px}
.review-name{font-size:0.76rem}
.spot-link{font-size:0.76rem;margin-top:6px}

/* cards with a coloured header band + body */
.beach-header,.day-header,.wildlife-header{padding:12px!important}
.beach-body,.day-body,.wildlife-body{padding:12px!important}
.beach-tip,.wildlife-tip{padding:8px 10px;font-size:0.78rem}
.beach-rank,.day-label{font-size:0.62rem;margin-bottom:3px}
.day-schedule li{grid-template-columns:1fr!important;gap:0!important}

/* side-by-side comparison blocks */
.morning-card{padding:13px 11px}
.morning-title{font-size:1.2rem;line-height:1.1;margin-bottom:10px}
.morning-steps li{grid-template-columns:1fr!important;gap:0!important;font-size:0.8rem}
.step-time{font-size:0.72rem}
.morning-total{font-size:0.8rem;margin-top:12px;padding-top:10px}
.pricing-side{padding:14px 12px}

/* ============ COMPARISON TABLES: category as a label row, the two options side by side ============ */
.compare-header,.table-header{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.compare-header-cell.category,.th.cat{display:none!important}
.compare-row,.table-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.compare-cell.category,.td.cat{display:flex!important;grid-column:1/-1;padding:7px 11px!important;font-size:0.74rem;text-transform:uppercase;letter-spacing:0.06em}
.compare-header-cell,.th{padding:10px 8px!important;font-size:1.05rem}
.compare-cell,.td{padding:10px 11px!important;font-size:0.82rem;line-height:1.45}

/* ============ PRICING ============ */
.pricing-cards{margin:16px 0}