/* ===========================================================================
   Headstone Tennis Club — home page v2
   Loaded only on pages using the "HTC Home v2" template.

   EVERYTHING IS SCOPED UNDER .htc-home so it cannot leak into the other 60
   pages. The theme's own styles for h1/h2/h3/p/a still apply inside that
   wrapper, so the resets below are deliberate, not decorative — without them
   Flash Pro's heading margins and link underlines fight the layout.

   Palette is the same as htc-brand.css: logo blue #103870, logo green #0E6935.

   Contrast, measured against real rendered pixels (see ops notes):
     hero eyebrow / h1 / lede / caption ... 6.1:1 to 10.9:1 at 375px and 1280px
     white on #0E6935 (primary button) .... 6.79:1
     #103870 on white (secondary button) .. 11.53:1
     white on #103870 (invite strip) ...... 11.53:1
     white on #0B2750 (reels band) ........ 14.79:1
   =========================================================================== */

.htc-home{
  --ink:#16221C; --ink-2:#46574E; --ink-3:#5E6C64;
  --navy:#103870; --navy-deep:#0B2750;
  --green:#0E6935; --green-dark:#0A4A26;
  --cream:#FBFAF6; --sand:#F1F0E7; --line:#E1E3D8;
  --r:14px;
  --shadow:0 1px 2px rgba(11,39,80,.05), 0 8px 24px rgba(11,39,80,.07);
  background:var(--cream);
  color:var(--ink);
  font-size:17px;
  line-height:1.62;
}
.htc-home *{box-sizing:border-box}
.htc-home img{max-width:100%;display:block;height:auto}
.htc-home h1,.htc-home h2,.htc-home h3{
  line-height:1.14;letter-spacing:-.021em;margin:0;text-wrap:balance;
  font-weight:700;color:inherit}
.htc-home p{margin:0}
.htc-home ul{margin:0;padding:0;list-style:none}
.htc-wrap{max-width:1160px;margin:0 auto;padding:0 22px}

/* The theme puts a page-title band above the content on every page. The home
   page has a hero instead, so it is suppressed here only. */
.page-template-htc-home-v2 #flash-breadcrumbs,
.page-template-htc-home-v2 .breadcrumb-trail{display:none !important}
/* and the theme's default content padding, which would inset the full-bleed
   hero away from the edges */
.page-template-htc-home-v2 #content,
.page-template-htc-home-v2 #content .container,
.page-template-htc-home-v2 #content .tg-container,
.page-template-htc-home-v2 #content #primary{
  max-width:none !important;width:auto !important;
  margin:0 !important;padding:0 !important;float:none !important}

/* ---------- buttons ---------- */
.htc-home .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:650;font-size:16px;line-height:1;padding:15px 26px;
  border-radius:999px;text-decoration:none !important;border:2px solid transparent;
  cursor:pointer;transition:background-color .18s,border-color .18s,transform .18s}
.htc-home .btn-primary{background:var(--green);border-color:var(--green);color:#fff}
.htc-home .btn-primary:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.htc-home .btn-white{background:#fff;border-color:#fff;color:var(--navy)}
.htc-home .btn-white:hover{background:#EDF1F7;border-color:#EDF1F7;color:var(--navy)}
.htc-home .btn-outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.htc-home .btn-outline:hover{background:var(--navy);color:#fff}
.htc-home .btn:active{transform:translateY(1px)}
.htc-home a:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:3px}

/* ---------- HERO ---------- */
.htc-hero{position:relative;isolation:isolate;background:#0B1F16;overflow:hidden}
/* crop pulled down so the crowd, chairs and drinks stay in frame */
.htc-hero .bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 62%;z-index:0}
/* two gradients: vertical anchors the base, horizontal darkens only the left
   where the words are, so court and crowd stay bright */
.htc-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top, rgba(6,20,14,.90) 0%, rgba(6,20,14,.74) 26%,
                            rgba(6,20,14,.40) 52%, rgba(6,20,14,.20) 72%,
                            rgba(6,20,14,.42) 100%),
    linear-gradient(to right, rgba(6,20,14,.82) 0%, rgba(6,20,14,.72) 30%,
                              rgba(6,20,14,.34) 62%, rgba(6,20,14,0) 100%)}
.htc-hero .htc-wrap{position:relative;z-index:2;
  min-height:clamp(460px,72vh,660px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:56px;padding-bottom:38px}
.htc-hero .eyebrow{color:#E4F5EA;font-size:13.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.htc-hero h1{color:#fff;font-size:clamp(33px,5.6vw,60px);max-width:15ch;
  text-shadow:0 2px 22px rgba(0,0,0,.42)}
.htc-hero .lede{color:#E6EFE9;font-size:clamp(17px,2.1vw,20.5px);max-width:46ch;
  margin-top:18px;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.htc-hero .cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
/* The price belongs above the fold: every competing club in the area leads with
   one, and ours was two clicks deep. #EAF7EF on the darkened hero measures
   above 6:1, so it clears AA at this size. */
.htc-hero .price{color:#EAF7EF;font-size:16px;margin-top:18px;
  text-shadow:0 1px 12px rgba(0,0,0,.6)}
.htc-hero .price strong{font-weight:800;color:#fff}
.htc-hero .caption{position:absolute;right:22px;bottom:14px;color:#CBD8D0;
  font-size:12.5px;text-align:right;max-width:44%;
  text-shadow:0 1px 10px rgba(0,0,0,.75);z-index:2}

/* ---------- invitation strip ---------- */
.htc-invite{background:var(--navy);color:#fff;border-top:4px solid var(--green)}
.htc-invite .htc-wrap{display:flex;flex-wrap:wrap;align-items:center;
  gap:20px 34px;padding-top:30px;padding-bottom:30px}
.htc-invite .txt{flex:1 1 420px}
.htc-invite h2{font-size:clamp(21px,2.6vw,27px);color:#fff}
.htc-invite p{color:#C8D6EC;margin-top:8px;max-width:62ch;font-size:16.5px}

/* ---------- sections ---------- */
.htc-home .sec{padding:56px 0}
.htc-home .sec-head{max-width:60ch;margin-bottom:30px}
.htc-home .sec-head h2{font-size:clamp(25px,3.4vw,34px);color:var(--navy)}
.htc-home .sec-head p{color:var(--ink-2);margin-top:12px}

.htc-grid{display:grid;gap:20px}
.htc-g4{grid-template-columns:repeat(4,1fr)}
.htc-g3{grid-template-columns:repeat(3,1fr)}

.htc-card{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 22px;
  box-shadow:var(--shadow);text-decoration:none !important;color:inherit;
  transition:border-color .18s,transform .18s}
.htc-card:hover{border-color:var(--green);transform:translateY(-2px);color:inherit}
.htc-card h3{font-size:19px;color:var(--navy)}
.htc-card p{color:var(--ink-2);font-size:15.5px;margin-top:10px;flex:1}
.htc-card .more{margin-top:16px;color:var(--green);font-weight:650;font-size:15px}
.htc-card:hover .more{text-decoration:underline;text-underline-offset:3px}

.htc-community{background:var(--sand);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.htc-community .sec-head{max-width:none;text-align:center;margin-left:auto;margin-right:auto}
.htc-community .sec-head h2{max-width:22ch;margin:0 auto}
.htc-community .htc-card{text-align:center;align-items:center}
.htc-community .htc-card .btn{margin-top:18px}

/* ---------- match videos ---------- */
.htc-reels{background:var(--navy-deep);color:#fff}
.htc-reels .sec-head h2{color:#fff}
.htc-reels .sec-head p{color:#C8D6EC}
.htc-reels .head-row{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:16px 30px;margin-bottom:26px}
.htc-reels .head-row .sec-head{margin-bottom:0}
.htc-reels .handle{color:#BFD3EE;font-size:14.5px;white-space:nowrap}
.htc-reels .handle a{color:#fff}
.htc-reelgrid{display:grid;gap:16px;grid-template-columns:repeat(6,1fr)}
.htc-reel{position:relative;display:block;border-radius:12px;overflow:hidden;
  background:#12203A;text-decoration:none !important;color:#fff;
  transition:transform .18s,box-shadow .18s}
.htc-reel:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.4);color:#fff}
.htc-reel img{width:100%;aspect-ratio:9/16;object-fit:cover}
.htc-reel .meta{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 11px;
  background:linear-gradient(to top, rgba(4,12,26,.92) 0%, rgba(4,12,26,.72) 45%,
                                     rgba(4,12,26,0) 100%)}
.htc-reel .label{display:block;font-size:13.5px;font-weight:650;line-height:1.25}
.htc-reel .date{display:block;font-size:12px;color:#C6D5EA;margin-top:3px}
.htc-reel .play{position:absolute;top:10px;right:10px;width:30px;height:30px;
  border-radius:50%;background:rgba(6,16,32,.62);display:grid;place-items:center}
.htc-reel .play::after{content:"";border-left:9px solid #fff;
  border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.htc-reels .foot-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px;align-items:center}

/* ---------- gallery ---------- */
.htc-gal{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.htc-gal img{border-radius:10px;aspect-ratio:4/3;object-fit:cover;width:100%}

/* ---------- news ---------- */
/* One post, not a row of three: the blog is updated a few times a year, so
   three cards would put 2023 alongside this season and make the club look
   dormant. The card is capped rather than full width so the measure stays
   readable, with the route to the rest of the blog directly beneath it. */
.htc-news{max-width:760px}
.htc-news article{background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:26px 26px 24px;box-shadow:var(--shadow)}
.htc-news .date{color:var(--ink-3);font-size:13.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase}
.htc-news h3{font-size:22px;margin-top:8px;color:var(--navy)}
.htc-news article p{margin-top:12px;color:var(--ink-2)}
.htc-news article a{color:var(--green);text-decoration:underline;
  text-underline-offset:3px}
.htc-news-foot{margin-top:22px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .htc-g4{grid-template-columns:repeat(2,1fr)}
  .htc-gal{grid-template-columns:repeat(2,1fr)}
  /* swipe rather than shrink — six 9:16 cards on a phone would be stamps */
  .htc-reelgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding-bottom:10px;-webkit-overflow-scrolling:touch}
  .htc-reel{flex:0 0 172px;scroll-snap-align:start}
  .htc-reels .foot-row .btn{flex:1 1 100%}
}
@media (max-width:700px){
  .htc-home{font-size:16.5px}
  .htc-home .sec{padding:42px 0}
  .htc-g4,.htc-g3{grid-template-columns:1fr}
  /* On a phone the words fill most of the frame and the photo is cropped to a
     narrow slice, so the desktop scrim is not enough. Tuned to ~6:1, which
     leaves margin without drowning the photograph. */
  .htc-hero .bg{object-position:50% 70%}
  .htc-hero::after{background:
    linear-gradient(to top, rgba(6,20,14,.88) 0%, rgba(6,20,14,.80) 34%,
                            rgba(6,20,14,.68) 62%, rgba(6,20,14,.60) 84%,
                            rgba(6,20,14,.63) 100%)}
  .htc-hero .htc-wrap{min-height:clamp(430px,78vh,560px);padding-bottom:30px}
  .htc-hero .cta{gap:11px}
  .htc-hero .cta .btn{flex:1 1 100%}
  .htc-hero .price{font-size:15.5px;margin-top:16px}
  .htc-hero .caption{position:static;text-align:left;max-width:none;
    margin-top:22px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}
  .htc-invite .htc-wrap{padding-top:26px;padding-bottom:26px}
  .htc-invite .btn{width:100%}
}