/**
 * Arab Nomad Fest · Tunisia (second edition) — a re-skin of the fest design
 * system, not a new one. Everything structural comes from main.css + fest.css;
 * this file only (1) re-points the --f-* palette tokens on the .fest-tn scope
 * to the Tunisian flag palette, and (2) adds the few components that only
 * exist on this page. Loaded after fest.css.
 *
 * Palette logic: the flag is red and white, so red carries the page and white
 * carries the cards. Flag red at full saturation across a whole hero reads
 * cheap, so large areas use a deepened maroon-to-red gradient and the vivid
 * red stays as the accent. Gold is kept from edition one: it is the thread
 * between the editions, it is the one accent that holds up on BOTH the deep
 * red bands and the warm white ones, and a red button on a red hero would
 * disappear.
 */

/* ---- Palette: Tunisian red + warm white -------------------------------- */
.fest-page.fest-tn{
	--f-terra:#C8102E;   /* Tunisian red: primary accent, borders, tags      */
	--f-teal:#7A0F1E;    /* deep burgundy: headings and the "teal" band      */
	--f-gold:#C8A24E;    /* kept from edition one                            */
	--f-camel:#C79550;   /* kept: overlines read on both dark and light      */
	--f-sand:#F7F1EC;    /* warm flag white                                  */
	--f-cream:#F9F4F0;
	--f-ink:#2A1418;     /* warm dark ink                                    */
	--f-dark:#3B0A12;    /* deep maroon band                                 */
	--f-light:#FBEFEF;   /* warm light text on dark                          */
	/* Mediterranean wave replaces the Berber zigzag, still in gold. */
	--f-berber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 9 Q 6 2 12 9 T 24 9 T 36 9 T 48 9' fill='none' stroke='%23C89A4E' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- Bands: the gradients in main.css are hard-coded, so re-point them -- */
.fest-tn .fest-teal{ background:linear-gradient(160deg,#7A0F1E,#4A0A12); }
.fest-tn .fest-olive{ background:linear-gradient(160deg,#C8102E,#9B0F22); }
.fest-tn .fest-hero{ background:linear-gradient(160deg,#3B0A12,#8E1220 55%,#C8102E); }

/* Crescent and five-pointed star from the flag, as a faint lattice over the
   hero so the gradient is not a flat field of red. */
.fest-tn .fest-hero::after{
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.13;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.1'%3E%3Cpath d='M30 22 A 14 14 0 1 0 30 50 A 11 11 0 1 1 30 22 Z'/%3E%3Cpolygon points='52,30 53.4,34.1 57.7,34.2 54.3,36.7 55.5,40.9 52,38.4 48.5,40.9 49.7,36.7 46.3,34.2 50.6,34.1'/%3E%3C/g%3E%3C/svg%3E");
	background-size:72px 72px;
}
.fest-tn .fest-hero__inner{ position:relative; z-index:1; }

/* ---- Hero: "Second Edition" badge above the title --------------------- */
.fest-tn .tn-badge{
	display:inline-block; margin:0 0 1rem;
	background:var(--f-gold); color:#3B0A12;
	font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
	padding:.4rem 1rem; border-radius:999px;
}

/* ---- Primary CTA: gold, not red --------------------------------------- */
/* A red button on a red hero recedes into it. Gold is the one colour that
   holds on both the deep red bands and the warm white ones. */
.fest-tn .fest-btn{ background:var(--f-gold); color:#3B0A12; }
.fest-tn .fest-btn:hover{ background:#b88d3c; color:#3B0A12; }

/* ---- Shared small pieces ---------------------------------------------- */
.fest-tn .tn-narrow{ max-width:860px; margin-inline:auto; }
.fest-tn .tn-pills{ justify-content:center; margin-block:1.6rem .4rem; }
.fest-tn .tn-note{
	max-width:680px; margin:1.8rem auto 0;
	color:#6b5560; font-size:.95rem; line-height:1.75;
}
/* Ghost button sitting on a light band needs the red ink, not white. */
.fest-tn .tn-btn-dark{ color:var(--f-terra); border-color:var(--f-terra); }
.fest-tn .tn-btn-dark:hover{ background:rgba(200,16,46,.08); color:var(--f-terra); }

/* Seven "why" cards instead of four, so let them flow. These white cards sit on
   a DARK band here (edition one put them on sand), so they must set their own
   ink explicitly, otherwise the body copy and the emoji inherit the band's
   light colour and disappear against the white card. */
.fest-tn .tn-why{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.fest-tn .tn-why .fest-why__card{ color:var(--f-ink); }
.fest-tn .tn-why .fest-why__card h3{ color:var(--f-teal); }
.fest-tn .tn-why .fest-why__card p{ color:#6b5560; margin:0; }
.fest-tn .tn-why .fest-why__icon{ color:var(--f-terra); }

/* ---- Sub-heading inside a band (e.g. "Getting to Hammamet") ----------- */
.fest-tn .tn-sub-h{
	font-family:var(--font-display); font-weight:800;
	font-size:clamp(1.2rem,2.8vw,1.6rem); color:#fff;
	margin:3rem 0 0; text-align:center;
}
.fest-tn .tn-sub-h + .fest-transport{ margin-block-start:1.4rem; }
.fest-tn .fest-transport__card p{ color:rgba(255,255,255,.88); line-height:1.75; margin:0; }

/* ---- Early bird: placeholder card until Ticket Tailor is wired --------- */
.fest-tn .tn-soon{
	max-width:680px; margin:2rem auto 0; text-align:center;
	background:#fff; border:2px solid var(--f-terra); border-radius:20px;
	padding:clamp(1.6rem,4vw,2.4rem);
	box-shadow:0 22px 50px -30px rgba(122,15,30,.6);
}
.fest-tn .tn-soon__icon{ font-size:2.2rem; line-height:1; display:block; }
.fest-tn .tn-soon__title{
	font-family:var(--font-display); font-weight:800; color:var(--f-teal);
	font-size:clamp(1.15rem,2.6vw,1.45rem); margin:.7rem 0 .6rem;
}
.fest-tn .tn-soon__body{ color:var(--f-ink); line-height:1.8; margin:0 0 1.3rem; }
.fest-tn .tn-soon__cta{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

/* ---- Edition one recap ------------------------------------------------- */
.fest-tn .tn-stats{
	list-style:none; margin:2.2rem auto 0; padding:1.4rem 0 0; max-width:760px;
	display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
	border-top:1px solid rgba(251,239,239,.26);
}
.fest-tn .tn-stat{ text-align:center; }
.fest-tn .tn-stat__num{
	display:block; font-family:var(--font-display); font-weight:800;
	font-size:clamp(1.5rem,3.6vw,2.2rem); color:var(--f-gold); line-height:1;
}
.fest-tn .tn-stat__label{
	display:block; margin-top:.4rem; font-size:.8rem; font-weight:600;
	color:rgba(251,239,239,.82);
}
@media (max-width:640px){ .fest-tn .tn-stats{ grid-template-columns:repeat(2,1fr); gap:1.3rem; } }

.fest-tn .tn-recap{
	display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.4rem;
}
.fest-tn .tn-recap__item{ margin:0; }
.fest-tn .tn-recap__img{
	width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
	border-radius:16px; border:1px solid rgba(200,162,78,.35);
	box-shadow:0 22px 48px -28px rgba(0,0,0,.8);
}
@media (max-width:760px){ .fest-tn .tn-recap{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .fest-tn .tn-recap{ grid-template-columns:1fr; } }

/* ---- Location photo grid ---------------------------------------------- */
/* Reuses the edition-one gallery component (and its lightbox JS) but at a
   "vibes" size rather than the small program-day thumbnail strip. auto-fit so
   the row stays balanced whether there are three photos or eight. */
.fest-tn .tn-gallery{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.2rem;
	margin:2rem auto 0; max-width:1100px;
}
.fest-tn .tn-shot{ margin:0; }
.fest-tn .tn-gallery .fest-gallery__item{
	width:100%; height:auto; aspect-ratio:4/3; border-radius:16px;
	box-shadow:0 18px 40px -24px rgba(122,15,30,.55);
}
.fest-tn .tn-gallery .fest-gallery__item img{ width:100%; height:100%; object-fit:cover; }
.fest-tn .tn-gallery .fest-gallery__zoom{ font-size:.85rem; padding:4px 7px; }
.fest-tn .tn-shot__cap{
	margin-top:.55rem; font-size:.82rem; line-height:1.5;
	color:#6b5560; text-align:center;
}
@media (max-width:560px){ .fest-tn .tn-gallery{ grid-template-columns:1fr; } }