/* ═══════════════════════════════════════════════════════════════════════
 *  THE TOUR CARD  (.etc-*)  —  rendered by inc/epl-tour-card.php
 *
 *  The homepage package card, used for every tour on the site (owner's
 *  decision 2026-09-11). Values are the homepage card's, read from the
 *  brand tokens in epl-base.css, so the card looks the same inside and
 *  outside the homepage. Two-class selectors (`.etc .etc-title`) outrank
 *  the parent theme's `.traveltour-body h3/ul/a` rules without !important.
 * ═══════════════════════════════════════════════════════════════════════ */
.etc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
@media (max-width:1000px){ .etc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){ .etc-grid{ grid-template-columns:1fr; } }

body a.etc,
body a.etc:hover,
body a.etc:focus{ color:var(--epl-ink); text-decoration:none; }
.etc{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--epl-line); border-radius:14px;
	overflow:hidden; box-shadow:0 1px 2px rgba(16,16,16,.05), 0 8px 24px rgba(16,16,16,.06);
	font-size:16px; line-height:1.65;
	transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.etc:hover{ transform:translateY(-5px); border-color:#ded6c6;
	box-shadow:0 4px 12px rgba(16,16,16,.08), 0 24px 48px rgba(16,16,16,.12); }
.etc:focus-visible{ outline:2px solid var(--epl-accent); outline-offset:3px; }
.etc-feature{ border-color:var(--epl-accent); box-shadow:0 0 0 1px var(--epl-accent), 0 1px 2px rgba(16,16,16,.05), 0 8px 24px rgba(16,16,16,.06); }
.etc-feature:hover{ border-color:var(--epl-accent); box-shadow:0 0 0 1px var(--epl-accent), 0 4px 12px rgba(16,16,16,.08), 0 24px 48px rgba(16,16,16,.12); }

.etc .etc-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--epl-sand); }
.etc .etc-media img{ width:100%; height:100%; object-fit:cover; display:block; max-width:none;
	transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.etc:hover .etc-media img{ transform:scale(1.06); }
.etc .etc-badge{ position:absolute; top:13px; left:13px; z-index:2; padding:6px 13px; border-radius:100px;
	background:rgba(15,14,12,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
	color:#fff; font-size:12px; font-weight:700; letter-spacing:.04em; line-height:1.65; }
.etc .etc-badge.is-hot{ background:var(--epl-accent); }
.etc .etc-days{ position:absolute; top:13px; right:13px; z-index:2; padding:6px 13px; border-radius:100px;
	background:rgba(255,255,255,.94); color:var(--epl-ink); font-size:12px; font-weight:700; line-height:1.65; }

.etc .etc-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.etc .etc-route{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.7;
	color:var(--epl-accent-dk); margin:0 0 8px; }
.etc .etc-title{ font-size:19px; font-weight:650; letter-spacing:-.015em; line-height:1.28; color:var(--epl-ink);
	margin:0 0 13px; padding:0; text-transform:none; }
/* the tour rating — filled stars are a gradient clipped to the score, so a
   4.9 shows as very nearly five without a second set of glyphs */
.etc .etc-rate{ display:flex; align-items:center; gap:7px; margin:-5px 0 12px; font-size:13px; line-height:1.6; }
.etc .etc-stars{ position:relative; font-size:13px; letter-spacing:1px; color:var(--epl-line); }
.etc .etc-stars::before{ content:"★★★★★"; position:absolute; inset:0; width:var(--etc-stars, 100%);
	overflow:hidden; white-space:nowrap; color:#e8a33d; }
.etc .etc-rate b{ font-weight:700; color:var(--epl-ink); }
.etc .etc-rate span:last-child{ color:var(--epl-ink-50); }
.etc .etc-rate span:last-child::before{ content:"· "; }
.etc .etc-points{ list-style:none; margin:0 0 18px; padding:0; }
.etc .etc-points li{ position:relative; padding:0 0 0 22px; font-size:14px; line-height:1.6; color:var(--epl-ink-70);
	margin:0 0 7px; list-style:none; }
.etc .etc-points li::before{ content:''; position:absolute; left:0; top:9px; width:11px; height:6px;
	border-left:2px solid var(--epl-accent); border-bottom:2px solid var(--epl-accent); transform:rotate(-45deg); }

.etc .etc-foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--epl-line-lt);
	display:flex; align-items:center; justify-content:space-between; gap:12px; }
.etc .etc-price small{ display:block; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--epl-ink-30); }
.etc .etc-price b{ font-size:23px; font-weight:700; letter-spacing:-.02em; color:var(--epl-ink); }
.etc .etc-price span{ font-size:13px; color:var(--epl-ink-50); }
.etc .etc-cta{ font-size:14px; font-weight:700; color:var(--epl-accent-dk); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.etc .etc-cta svg{ width:14px; height:14px; fill:currentColor; }

/* the dark closing tile of a grid */
body a.etc-all,
body a.etc-all:hover{ color:#fff; text-decoration:none; }
.etc-all{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px;
	background:var(--epl-dark); border-radius:14px; padding:30px 28px;
	background-image:radial-gradient(120% 90% at 100% 0%, rgba(212,134,82,.22) 0%, transparent 60%);
	transition:transform .22s ease, box-shadow .22s ease; }
.etc-all:hover{ transform:translateY(-5px); box-shadow:0 4px 12px rgba(16,16,16,.08), 0 24px 48px rgba(16,16,16,.12); }
.etc-all b{ display:block; font-size:21px; font-weight:700; letter-spacing:-.02em; line-height:1.3; color:#fff; }
.etc-all span{ font-size:14.5px; color:rgba(255,255,255,.72); line-height:1.6; }
.etc-all i{ font-style:normal; display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:#f0b183; }
.etc-all i svg{ width:14px; height:14px; fill:currentColor; }

@media (prefers-reduced-motion:reduce){
	.etc, .etc-all, .etc .etc-media img{ transition:none; }
	.etc:hover, .etc-all:hover{ transform:none; }
	.etc:hover .etc-media img{ transform:none; }
}
/* transitional: a page own one-line summary, shown until that tour has its
   three card points — same slot, same rhythm as .etc-points */
.etc .etc-blurb{ font-size:14px; line-height:1.6; color:var(--epl-ink-70); margin:0 0 18px; }

/* host grids — three lists that used to hold text rows now hold cards, so they
   need card columns instead of one full-width column (2026-09-12) */
.ep-tour-list, .epit-pkg-list, .epni-ships, .epl-tours-grid{
	display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px; align-items:start;
}

/* ═══ end of the tour card ═══════════════════════════════════════════════ */