/* ===========================================================================
   EVENTS & PARTNERS  |  scoped styles (prefix: ep-)
   Mirrors arkvet-wp theme tokens. Falls back gracefully if loaded standalone.

   SPACING SCALE: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 44 / 64
   RADII: 22px outer (cards), 12px inner (panels, list rows)
   TYPE:  banner 44 / section 38 / intro 32 / card 22 / body 16 / small 14
          mobile:  32 /          26 /       22 /      19 /      15 /      14
   Stick to these when editing. Off-scale one-offs are what made the first
   draft feel uneven.
   =========================================================================== */
.ep-scope{
  --ep-yellow:#eeb626;      /* accents and fills only, never small text */
  --ep-gold:#8a6a12;        /* the accessible gold, for text on white/cream */
  --ep-navy:#25334c;
  --ep-slate:#3a4459;
  --ep-blue:#0f327b;
  --ep-cream:#fff7e9;
  --ep-line:#e7e3da;
  --ep-body:var(--font-muli,"Muli","Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
  --ep-head:var(--font-montserrat,"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
  font-family:var(--ep-body);font-weight:300;line-height:1.55;color:#24334c;
}
.ep-scope *,.ep-scope *::before,.ep-scope *::after{box-sizing:border-box;}

/* The element resets below are wrapped in :where() ON PURPOSE. :where() has
   zero specificity, so ".ep-scope :where(h2)" scores (0,1,0) and every
   component rule further down can still set its own margin, weight and size.
   Written as a plain ".ep-scope h2" the reset scores (0,1,1) and silently
   overrides every one of them, which is exactly the bug this replaced. */
.ep-scope :where(h1,h2,h3,h4){
  margin:0;font-family:var(--ep-head);font-weight:600;line-height:1.25;
}
.ep-scope :where(p){margin:0 0 12px;font-weight:300;text-wrap:pretty;}
.ep-scope :where(p:last-child){margin-bottom:0;}
.ep-scope :where(h1,h2,h3){text-wrap:balance;}
.ep-scope img{display:block;max-width:100%;height:auto;}
.ep-scope a{color:inherit;}

/* --- container: mirrors Bootstrap 5 .container breakpoints exactly --------- */
.ep-container{width:100%;margin-inline:auto;padding-inline:.75rem;}
@media (min-width:576px){.ep-container{max-width:540px;}}
@media (min-width:768px){.ep-container{max-width:720px;}}
@media (min-width:992px){.ep-container{max-width:960px;}}
@media (min-width:1200px){.ep-container{max-width:1140px;}}
@media (min-width:1400px){.ep-container{max-width:1320px;}}
@media (max-width:992px){.ep-container{padding-inline:1rem;}}

/* --- links ----------------------------------------------------------------
   This page has no buttons on purpose. It shares information; the theme
   header and footer already carry the booking call-to-action. If a button is
   ever needed here, use the theme's own .btn.btn-primary rather than adding
   one back.

   NOTE the ".ep-scope" prefix. A bare ".ep-link" loses the cascade to
   ".ep-scope a{color:inherit}" and renders in body colour instead.
   -------------------------------------------------------------------------- */
.ep-scope .ep-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ep-head);font-size:14px;font-weight:600;
  color:var(--ep-blue);text-decoration:none;transition:color .3s ease-in-out;
}
.ep-scope .ep-link:hover,.ep-scope .ep-link:focus-visible{
  color:var(--ep-gold);text-decoration:underline;
}
.ep-scope .ep-link svg{width:13px;height:13px;fill:currentColor;}

/* --- page banner ---------------------------------------------------------- */
.ep-banner{
  position:relative;display:flex;flex-direction:column;background-color:var(--ep-navy);
  background-position:50% 42%;background-size:cover;background-repeat:no-repeat;
}
/* Ends at solid navy so the banner dissolves into the navy intro below it
   with no visible seam. */
.ep-banner::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,#25334cbf 0%,#25334c 100%);
}
.ep-banner .ep-container{
  position:relative;z-index:1;display:flex;flex-direction:column;
  min-height:250px;padding:40px 24px;justify-content:center;align-items:center;
}
.ep-banner__kicker{
  color:var(--ep-yellow);font-family:var(--ep-head);font-weight:600;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;
}
/* text-wrap balance/pretty: chan tinh trang mot chu bi rot xuong dong rieng */
.ep-banner__title{color:#fff;font-size:44px;font-weight:700;text-align:center;text-wrap:balance;}
.ep-banner__sub{
  color:#fff;opacity:.88;font-size:17px;text-align:center;max-width:56ch;margin-top:12px;
  text-wrap:balance;
}
@media (max-width:992px){
  .ep-banner .ep-container{min-height:190px;padding:32px 16px;}
  .ep-banner__title{font-size:32px;}
  .ep-banner__kicker{font-size:11px;margin-bottom:8px;}
  .ep-banner__sub{font-size:15px;margin-top:12px;}
}

/* --- intro: two columns, copy + team photo -------------------------------- */
.ep-intro{background-color:var(--ep-navy);overflow:hidden;}
.ep-intro .ep-container{
  display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center;
  padding-block:64px;
}
.ep-intro__title{color:#fff;font-size:32px;font-weight:700;margin-bottom:16px;}
.ep-intro__desc{color:#fff;font-size:16px;font-weight:300;opacity:.88;max-width:56ch;}
.ep-intro__desc + .ep-intro__desc{margin-top:12px;}
.ep-intro__jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
.ep-scope .ep-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;
  font-family:var(--ep-head);font-size:13px;font-weight:600;text-decoration:none;
  color:#fff;background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);transition:all .3s ease-in-out;
}
.ep-scope .ep-chip:hover,.ep-scope .ep-chip:focus-visible{
  background:var(--ep-yellow);color:#24334c;box-shadow:inset 0 0 0 1px var(--ep-yellow);
}
.ep-scope .ep-chip span{color:var(--ep-yellow);font-weight:700;}
.ep-scope .ep-chip:hover span,.ep-scope .ep-chip:focus-visible span{color:#24334c;}
.ep-intro__media{position:relative;}
.ep-intro__img{
  width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 42%;border-radius:20px;
  box-shadow:0 16px 40px rgba(0,0,0,.3);
}
.ep-intro__cap{margin-top:12px;color:#fff;opacity:.6;font-size:13px;text-align:right;}
@media (max-width:992px){
  .ep-intro .ep-container{grid-template-columns:1fr;gap:24px;padding-block:44px;}
  .ep-intro__title{font-size:22px;}
  .ep-intro__desc{font-size:15px;}
  .ep-intro__media{order:-1;}
  .ep-intro__img{aspect-ratio:16/9;border-radius:16px;}
  .ep-intro__cap{text-align:left;}
}

/* --- shared section furniture --------------------------------------------- */
.ep-section{overflow:hidden;}
.ep-section .ep-container{padding-block:64px;}
.ep-section--cream{background-color:var(--ep-cream);}
/* The rule runs the full container width so it aligns with the card grid
   below it. The measure is capped on the description text instead. */
.ep-section__head{margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--ep-line);}
.ep-section__eyebrow{
  display:block;font-family:var(--ep-head);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ep-gold);margin-bottom:8px;
}
.ep-section__title{font-size:38px;font-weight:700;color:#24334c;margin-bottom:12px;}
.ep-section__desc{font-size:16px;font-weight:300;color:var(--ep-slate);max-width:56ch;}
@media (max-width:992px){
  .ep-section .ep-container{padding-block:44px;}
  .ep-section__head{margin-bottom:24px;padding-bottom:16px;}
  .ep-section__title{font-size:26px;}
  .ep-section__desc{font-size:15px;}
}

/* --- events: two-up card grid --------------------------------------------- */
.ep-events{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.ep-event{
  display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 12px 32px rgba(36,51,76,.09);
}
.ep-event__media{position:relative;}
.ep-event__img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.ep-event__badge{
  position:absolute;left:20px;bottom:-1px;display:flex;align-items:baseline;gap:8px;
  padding:12px 20px;border-radius:12px 12px 0 0;background:var(--ep-navy);color:#fff;
}
.ep-event__day{font-family:var(--ep-head);font-size:24px;font-weight:700;line-height:1;}
.ep-event__mon{
  font-family:var(--ep-head);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ep-yellow);
}
.ep-event__yr{font-size:13px;font-weight:300;opacity:.65;}
.ep-event__body{display:flex;flex-direction:column;flex:1 1 auto;padding:24px 28px 24px;}
.ep-event__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.ep-tag{
  display:inline-block;padding:5px 12px;border-radius:100px;
  font-family:var(--ep-head);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;background:var(--ep-cream);color:var(--ep-gold);
}
/* Navy on yellow, not white on yellow. White on #eeb626 is 1.85:1. */
.ep-tag--accent{background:var(--ep-yellow);color:#24334c;}
.ep-event__title{font-size:22px;font-weight:600;color:#24334c;margin-bottom:12px;}
.ep-event__meta{
  display:flex;flex-direction:column;gap:8px;margin-bottom:16px;
  padding-bottom:16px;border-bottom:1px solid var(--ep-line);
}
.ep-meta{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14px;color:var(--ep-slate);}
.ep-meta svg{flex:0 0 16px;width:16px;height:16px;margin-top:2px;fill:var(--ep-yellow);}
.ep-event__desc{font-size:15px;color:var(--ep-slate);margin-bottom:20px;}
/* A rule above the link so the leftover space in the shorter card reads as
   deliberate rather than as a gap. */
.ep-event__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--ep-line);
}
@media (max-width:992px){
  .ep-events{grid-template-columns:1fr;gap:20px;}
  .ep-event__body{padding:20px 20px;}
  .ep-event__title{font-size:19px;}
}

/* --- partner offers: wide row, copy left / terms right ---------------------
   No coloured stripe down the left edge. It was the only element on the page
   doing that, it carried no meaning (a second offer would get the same yellow
   bar), and a tinted rule on the side of a card is the house style of every
   generic template going. The card earns its structure the same way the brand
   cards do instead: a named head, a hairline, then the content.
   -------------------------------------------------------------------------- */
.ep-offers{display:flex;flex-direction:column;gap:20px;}
.ep-offer{
  display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:stretch;
  background:#fff;border-radius:22px;padding:28px 32px;
  box-shadow:0 12px 32px rgba(36,51,76,.09);
}
.ep-offer__main{display:flex;flex-direction:column;}
/* Partner name reads at body size, not as a 12px uppercase eyebrow. It is the
   thing a reader scans for, so it should not be the smallest text on the card.
   The category sits beside it as a tag, matching the event cards. */
.ep-offer__head{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--ep-line);
}
.ep-offer__partner{
  margin:0;font-family:var(--ep-head);font-size:16px;font-weight:600;color:#24334c;
}
.ep-offer__title{font-size:22px;font-weight:600;color:#24334c;margin-bottom:12px;}
.ep-offer__desc{font-size:15px;color:var(--ep-slate);margin-bottom:20px;}
.ep-offer__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:auto;}
/* The hairline matters here. This panel's cream is the same value as the
   section behind the card, so without an edge it reads as a hole punched
   through the white card rather than as a panel sitting on it. */
.ep-offer__terms{
  padding:20px 24px;background:var(--ep-cream);
  border:1px solid var(--ep-line);border-radius:12px;
}
.ep-offer__terms h4{
  font-size:12px;font-family:var(--ep-head);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ep-gold);margin-bottom:12px;
}
.ep-offer__terms ul{margin:0;padding:0;list-style:none;}
.ep-offer__terms li{position:relative;padding-left:20px;font-size:14px;color:var(--ep-slate);}
.ep-offer__terms li + li{margin-top:8px;}
.ep-offer__terms li::before{
  content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--ep-yellow);
}
@media (max-width:992px){
  .ep-offer{grid-template-columns:1fr;gap:20px;padding:20px;border-radius:16px;}
  .ep-offer__head{margin-bottom:12px;padding-bottom:12px;}
  .ep-offer__partner{font-size:15px;}
  .ep-offer__title{font-size:19px;}
  .ep-offer__actions{margin-top:0;}
}

/* --- brands: text-led cards ------------------------------------------------
   No thumbnails on purpose. There are no real product photographs yet, and a
   stock cat in a small round frame reads as a profile picture, not a product.
   Each card has a commented <img> slot ready for a real pack shot.
   -------------------------------------------------------------------------- */
.ep-brands{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.ep-brand{
  display:flex;flex-direction:column;background:#fff;border-radius:22px;
  padding:28px 28px 24px;box-shadow:0 12px 32px rgba(36,51,76,.09);
}
.ep-brand__head{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--ep-line);}
/* Product shots. Fixed tile height rather than an aspect ratio so one shot and
   two shots keep the same rhythm, and object-fit:contain so no pack is cropped.
   The hairline border defines the tile; each image's own backdrop colour is set
   as that tile's background so the photo blends into it with no visible square.
   Lady N ships on cream (#fff6ed), Pawith on white. */
.ep-brand__shots{display:flex;gap:8px;margin-bottom:20px;}
.ep-brand__shot{flex:1 1 0;min-width:0;margin:0;}
.ep-brand__shot img{
  width:100%;height:170px;object-fit:contain;
  background:#fff;border:1px solid var(--ep-line);border-radius:12px;padding:8px;
}
.ep-brand__shot figcaption{
  margin-top:8px;font-family:var(--ep-head);font-size:12px;font-weight:600;
  letter-spacing:.04em;color:var(--ep-slate);text-align:center;
}
.ep-brand__cat{
  font-family:var(--ep-head);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ep-gold);margin-bottom:8px;
}
.ep-brand__name{font-size:22px;font-weight:700;color:#24334c;}
.ep-brand__desc{font-size:15px;color:var(--ep-slate);margin-bottom:20px;}
.ep-brand__list{margin:0 0 20px;padding:0;list-style:none;}
.ep-brand__list li{
  padding:16px 20px;font-size:14px;color:var(--ep-slate);
  background:var(--ep-cream);border-radius:12px;
}
.ep-brand__list li + li{margin-top:8px;}
.ep-brand__list strong{
  display:block;font-family:var(--ep-head);font-weight:600;font-size:13px;
  color:#24334c;margin-bottom:4px;
}
.ep-brand__list a,.ep-brand__desc a,.ep-event__desc a{
  color:var(--ep-blue);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;transition:color .3s ease-in-out;
}
.ep-brand__list a:hover,.ep-brand__desc a:hover,.ep-event__desc a:hover,
.ep-brand__list a:focus-visible,.ep-brand__desc a:focus-visible,.ep-event__desc a:focus-visible{
  color:var(--ep-gold);
}
.ep-brand__foot{margin-top:auto;padding-top:4px;}
@media (max-width:992px){
  .ep-brands{grid-template-columns:1fr;gap:20px;}
  .ep-brand{padding:20px 20px 20px;border-radius:16px;}
  .ep-brand__name{font-size:19px;}
}