/* MAYCARES — Visual discovery layer (P1)
   Editorial, photography-first modules shared by Home and MAY.
   Loaded after maycares-explore.css (app shell) and maycares-pages.css. */

/* Section header with an inline "see all" action */
.disc-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:12px;
}
.disc-head h2{
  min-width:0;font-size:20px;font-weight:var(--fw-title);line-height:var(--lh-title);
  letter-spacing:-.01em;color:var(--text);
}
.disc-head .disc-all{
  flex:0 0 auto;white-space:nowrap;font-size:14px;font-weight:var(--fw-micro);
  color:var(--navy);text-decoration:none;
}
.disc-head .disc-all:hover{text-decoration:underline}
.disc-sub{
  margin-top:6px;font-size:14px;font-weight:var(--fw-body);line-height:var(--lh-body);
  color:var(--blue-gray);max-width:60ch;
}
@media (min-width:768px){.disc-head h2{font-size:22px}}

/* Horizontal photo rail — ONE continuous row at every breakpoint.
   Home is a preview surface: it must never grow vertically as records grow. */
.disc-rail{
  margin-top:14px;display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
.disc-rail>*:last-child{margin-right:24px}
.disc-rail::-webkit-scrollbar{display:none}
.disc-rail:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:18px}
.disc-card{
  touch-action:manipulation;flex:0 0 68%;max-width:280px;scroll-snap-align:start;display:block;text-decoration:none;
  color:inherit;min-width:0;
}
.disc-media{
  position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:#F3F4F6;
}
.disc-media img{width:100%;height:100%;object-fit:cover;display:block}
.disc-media .disc-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:var(--fw-micro);letter-spacing:.08em;color:var(--blue-gray);
}
.disc-card-body{padding:10px 2px 0}
.disc-kicker{
  font-size:10px;font-weight:var(--fw-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-gray);
}
.disc-title{
  margin-top:4px;font-size:15px;font-weight:var(--fw-title);line-height:1.3;color:var(--text);
  display:block;
}
.disc-meta{margin-top:3px;font-size:13px;color:var(--blue-gray);line-height:1.4}
@media (min-width:768px){
  .disc-card{flex:0 0 42%}
}
@media (min-width:1024px){
  .disc-card{flex:0 0 calc((100% - 3 * 20px) / 4);max-width:none}
  .disc-rail{gap:20px}
}

/* Tablet rails use two or three generous cards before the existing desktop
   four-up layout takes over. */
@media (min-width:768px) and (max-width:899px){
  .disc-card,.disc-card-wrap{flex-basis:calc((100% - 18px) / 2);max-width:none}
  .disc-rail{gap:18px}
  .disc-title{font-size:16px}
}
@media (min-width:900px) and (max-width:1199px){
  .disc-card,.disc-card-wrap{flex-basis:calc((100% - 40px) / 3);max-width:none}
  .disc-rail{gap:20px}
  .disc-title{font-size:16px}
}
.disc-hint{margin-top:8px;font-size:12px;color:var(--blue-gray)}

/* Home editorial image sequence — supplied MAYCARES artwork with a compact,
   legible mobile crop. Existing modules remain immediately below each image. */
.home-measure{max-width:980px}
.home-welcome{margin-top:20px}
.home-welcome>img,.home-editorial-banner>img{display:block;width:100%;height:auto}
.home-editorial-banner>.editorial-banner{margin:0;border-radius:0;box-shadow:none}
.home-welcome>img{border-radius:16px;background:var(--placeholder)}
.home-editorial-banner{
  display:block;width:100%;margin-bottom:20px;overflow:hidden;border-radius:14px;
  background:var(--placeholder);box-shadow:0 10px 28px rgba(29,71,107,.1);transition:transform .2s ease,box-shadow .2s ease;
}
.home-editorial-banner:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(29,71,107,.15)}
.home-cat-cards{margin-top:16px}
.home-cat-cards .exp-cat-card{text-decoration:none}
.home-pageant-previews{display:contents}
.home-pageant-meta{font-weight:var(--fw-micro);color:var(--navy)}
.home-top{margin-top:24px}
.home-top h3{font-size:20px;font-weight:var(--fw-title);line-height:var(--lh-title);color:var(--text)}
.home-top-participants{display:inline-block;margin-top:12px;padding:5px 12px;border:1px solid var(--hairline-strong);border-radius:999px;font-size:12px;font-weight:var(--fw-micro);color:var(--navy)}
.home-top-rail{margin-top:18px}
.home-top-card{text-decoration:none}
.home-top-card .cand-portrait{isolation:isolate}
.home-top-rank{position:absolute;z-index:1;top:10px;left:10px;padding:5px 10px;border-radius:999px;background:var(--white);border:1px solid var(--hairline-strong);color:var(--navy);font-size:13px;font-weight:var(--fw-title)}
.home-top-rail > :first-child .home-top-rank{border-color:var(--gold);color:var(--navy)}
.home-top-card .cand-name,.home-top-card .cand-title{display:block}
.home-top-percent{display:block;margin-top:10px;font-size:15px;font-weight:var(--fw-title);color:var(--navy)}
.home-top-disclaimer{margin-top:14px;font-size:12px;line-height:1.5;color:var(--blue-gray)}
@media (min-width:768px){.home-top h3{font-size:22px}}

@media (max-width:560px){
  .home-welcome{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);border-radius:0}
  .home-welcome>img{border-radius:0}
}
@media (min-width:768px){
  .home-welcome{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){.home-editorial-banner{transition:none}}

/* Shared destination banner: exact supplied artwork, never cropped or
   overprinted. The image carries its own editorial title, while the route
   keeps a single screen-reader H1 where repeating visible copy is redundant. */
.editorial-banner{
  display:block;width:100%;margin:20px 0 24px;overflow:hidden;border-radius:14px;
  background:var(--placeholder);box-shadow:0 10px 28px rgba(29,71,107,.1);
}
.editorial-banner>img{display:block;width:100%;height:auto}
.editorial-banner-compact{margin-bottom:18px}
@media (max-width:560px){
  .editorial-banner{margin-left:calc(var(--gutter) * -1);width:calc(100% + (var(--gutter) * 2));border-radius:0}
  .editorial-banner-compact{margin-left:0;width:100%;border-radius:10px}
}

/* Rail shell: relative host for the desktop previous/next controls. */
.rail-shell{position:relative;min-width:0}
.rail-sentinel{flex:0 0 1px;width:1px}
.rail-nav{
  display:none;position:absolute;top:34%;z-index:2;width:38px;height:38px;border-radius:999px;
  border:1px solid var(--hairline-strong);background:var(--white);color:var(--navy);
  align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-hover,0 4px 14px rgba(16,24,40,.12));
}
.rail-nav svg{width:20px;height:20px}
.rail-nav:hover{border-color:var(--navy)}
.rail-prev{left:-16px}
.rail-next{right:-16px}
@media (min-width:1024px){
  .rail-nav{display:inline-flex}
}

@media (min-width:768px) and (max-width:1023px){
  .rail-nav{display:inline-flex}
}

/* Editorial feature module: full-bleed photo with copy underneath */
.disc-feature{
  margin-top:14px;border:1px solid var(--hairline-strong);border-radius:20px;overflow:hidden;
  background:var(--white);
}
.disc-feature .disc-media{border-radius:0;aspect-ratio:16/9}
.disc-feature-body{padding:18px 18px 22px}
.disc-feature-body h3{
  font-size:19px;font-weight:var(--fw-title);line-height:1.3;letter-spacing:-.01em;color:var(--text);
}
.disc-feature-body p{
  margin-top:8px;font-size:15px;font-weight:var(--fw-body);line-height:var(--lh-body);
  color:var(--blue-gray);
}
.disc-feature-body .btn-primary{margin-top:16px}
@media (min-width:768px){.disc-feature-body{padding:24px 24px 28px}}

/* Home rhythm */
.measure-discover .disc-section{margin-top:36px}
.measure-discover .disc-section:first-of-type{margin-top:28px}
@media (min-width:768px){.measure-discover .disc-section{margin-top:44px}}

/* MAY compact interaction shell (P1 visual evolution) */
.may-compact{margin-top:20px}
.may-quickgrid{
  margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
/* Mobile only: a lone card on the final row centers instead of hanging left. */
@media (max-width:767px){
  .may-quickgrid > .may-quicktile:last-child:nth-child(odd){
    grid-column:1 / -1;justify-self:center;width:calc((100% - 10px) / 2);
  }
}
@media (min-width:768px){.may-quickgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
.may-quicktile{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;
  border:1px solid var(--hairline-strong);border-radius:16px;background:var(--white);
  padding:14px;cursor:pointer;font-family:inherit;text-align:left;
  transition:background .15s ease,border-color .15s ease;
}
.may-quicktile:hover{background:#FAFBFC;border-color:var(--navy)}
.may-quicktile .qp-icon{width:22px;height:22px;flex:0 0 22px;color:var(--navy)}
.may-quicktile span{
  font-size:13px;font-weight:var(--fw-micro);line-height:1.35;color:var(--text);
  overflow-wrap:anywhere;
}

/* Place ☆ inside a horizontal discovery rail card */
.disc-card-wrap{position:relative;flex:0 0 68%;max-width:280px;scroll-snap-align:start;min-width:0}
.disc-card-wrap > .disc-card{flex:none;max-width:none;width:100%}
.disc-card-wrap > .place-star{top:8px;right:8px;width:34px;height:34px}
.disc-card-wrap > .place-star svg{width:18px;height:18px}

/* MAY quick actions — compact horizontal chip rail (replaces the 9-card grid) */
.may-quickrail{margin-top:18px}
.may-quickrail .chip{gap:8px}
.may-quickrail .chip svg{width:17px;height:17px;flex:0 0 auto}
.may-quickrail-hint{
  margin-top:8px;font-size:13px;line-height:var(--lh-body);color:var(--blue-gray);text-align:center;
}
.mtops-toggle{margin:8px 0 16px;padding:12px 14px;border:1px solid #E5E7EB;border-radius:12px;background:#fff}
.mtops-toggle p{margin:0 0 6px;font-size:14px;color:#4B5563}
.mtops-toggle label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#1D476B;cursor:pointer;min-height:32px}
.mtops-toggle input{width:20px;height:20px;accent-color:#1D476B}
