/* JONESPORTAMERICA.COM - Home Pg */

h1 {font-size: 2.5em;}
@media (max-width: 500px) {h1 {font-size: 1.875em;}}

#maincontent {background: rgba(201,233,251,.75);}

.content-section {
position: relative;
isolation: isolate;
display: grid;
place-items: center;
background-color: #fff;
padding: 1.5rem 2rem;
overflow: hidden;
}
@supports (overflow: clip) {
.content-section {overflow: clip;}
}

/* ////////// HERO ////////// */
#intro {
position: relative;
z-index: auto; 
overflow: visible; /* allow the card to overhang into section two */
background-color: #fff;
}

/* Background image layer (from <picture>) */
.hero-media {
position: absolute;
inset: 0;  /* top/right/bottom/left: 0 */
z-index: 2;
}
.hero-media img {
display: block;
width: 100%;
height: 100%; /* fill the aspect-ratio box */
object-fit: cover;
object-position: 50% 52%;
}
/* #intro-hme lives in <main>: pull it up by the same overhang */
#intro-hme {
position: relative; 
padding: 0 30px 1.5rem; background-color: #fff; border-radius: 10px; box-shadow: 0 0.8rem 1.25rem rgba(0, 0, 0, 0.20);
z-index: 3; 
}

/* 0px to 500px (img 500x400) */
@media (min-width: 0px) and (max-width: 500px) {
#intro {aspect-ratio: 500 / 400;}
.hero-media {position: relative; aspect-ratio: auto; overflow: visible;}
.hero-media img {height: auto; object-fit: contain;}
#intro-hme { margin-top: 0;padding: 0 20px 2rem; width: 100%; border-radius: 0; }
}
/* 501–800px (img 800x533) */
@media (min-width: 501px) and (max-width: 800px) {
#intro {aspect-ratio: 800 / 533;}
#intro-hme { margin-top: -50px; }
}
/* 801-1280px (img 1280x730) */
@media (min-width: 801px) and (max-width: 1280px) {
#intro {aspect-ratio: 1280 / 730;}
#intro-hme { margin-top: -70px; }
}
/* 1281-1600px (img 1600x667) */
@media (min-width: 1281px) and (max-width: 1600px) {
#intro {aspect-ratio: 1600 / 667;}
#intro-hme { margin-top: -90px; }
}
/* 1601px and above (img 1920x800)) */
@media (min-width: 1601px) {
#intro {aspect-ratio: 1920 / 800;}
#intro-hme { margin-top: -130px; }
}


/* text styles used in the hero */
p.h1-sub {text-wrap: balance; font-size: 1.5rem; text-align: center; margin: .5em auto; line-height: 1.25;}
p.intro {max-width: 800px; margin: 0 auto; font-size: 1.125em;}

#intro-hme .btn {font-size: 1.1rem; margin-top: 1em;}
.btn {display: block; text-decoration: none; padding: .75rem 1.1rem; border-radius: 4px; border: 0; margin: 10px auto 0; text-align: center; width: max-content;}

.btn-blu {background-color: #195f83; color: #fff;}
.btn-blu:hover {background-color: #2599d6;}
.btn:focus-visible {outline: 2px solid #25b5e7; outline-offset: 2px;}


/* ////////// TOPICS PANEL ROWS ////////// */
.topics-panel {max-width: 1600px; margin-inline: auto; padding-block: 2.5rem; display: grid; row-gap: 3rem; text-align: center; }

/* ===== Mobile-first stack (<799px) ===== */
.topics {
--gutter: clamp(1rem, 4vw, 2.75rem); /* equal outer spacing */
--gap:    clamp(.5rem, 2vw, 1rem); /* space between image and card */
padding: 1.5rem var(--gutter);
}
.topics__spacer {
block-size: clamp(220px, 40vw, 360px);
min-height: 250px;
/* Using bkgd images instead of putting img in this block
keep next line for future use.
background: #dbe7f1 center / cover no-repeat;
*/
}
.topics__content {
/*box-sizing: border-box;*/
margin: 1rem auto 0;
max-width: 76ch;
width: 100%;
display: grid;
gap: .25rem;
padding: 2rem 2.5rem 1.75rem;
text-align: left;
background-color: #fff;
}

/* Alternating order:
.odd: content right (default)
.even: content left */
.topics.even .topics__spacer {order: 2;}
.topics.even .topics__content {order: 1;}


/* ===== Desktop/tablet FLEX to keep equal gutters ===== */
@media (min-width: 800px) {
/* Base flex layout for each row */
.topics {display: flex; align-items: center; gap: var(--gap, clamp(1rem, 3vw, 2rem)); padding: 2rem var(--gutter, clamp(1rem, 4vw, 2.75rem));}
/* Default: ODD row - spacer left (order 0), content right (order 1) */
.topics__spacer {order: 0; flex: 1 1 0; min-width: 0; border-radius: 6px; min-height: 450px;}
.topics__content {order: 1;  /* content on the RIGHT by default */
 flex: 0 1 auto; min-width: 0; max-width: min(56ch, calc((100% - var(--gap, 2rem)) / 2));
margin: 0; border-radius: 6px;}

/* EVEN row - flip the two children only */
.topics.even .topics__spacer { order: 1; }
.topics.even .topics__content { order: 0; }  /* content LEFT */
}
.topics h2, .topics h3 {text-align: center; margin-bottom: .125em; text-wrap: balance;}
.topics h2 {font-size: 1.5em;}
.topics h3 {font-size: 1.125em;}
.topics__content p.p-subhd {font-size: 1.125em; line-height: 1.25em; font-weight: 600; text-align: center; margin: 0 auto 1em;}
.topics__content ul { list-style: none; margin: 0 auto 1rem; padding: 0; max-width: 350px; text-align: center;}
.topics__content ul li { margin: .25rem 0 1.25rem; text-align: center;}
.topics__content span {margin: 0 auto;}


/* -----------------------------------------
Mobile (768 and less): stack + image on .topics__spacer
----------------------------------------- */
@media (max-width: 799px) {
.topics {grid-template-columns: 1fr; column-gap: 0; padding: 0;}
.topics__content {width: 100%; max-width: none; padding: 1.5rem; text-align: center;}
.topics__content { overflow-wrap: break-word; }
.topics__content > * { max-width: 100%; }
.topics.even .topics__spacer   { order: 1; }
.topics.even .topics__content { order: 2; }
}


/* Fix for narrow content cards at 800-1249px (TEST #1 = 384px wise) */
/*@media (min-width: 800px) and (max-width: 1249px) {
  .topics__content {
    max-width: min(52ch, calc((100% - var(--gap, 2rem)) * 0.55));
  }
  .topics__spacer {
    min-height: 360px;
  }
}
*/




.topics .btn {text-decoration: none; font-size: 1.1rem; padding: 0.75rem 1rem; border-radius: 0.375rem;}


/* -----------------------------------------
Desktop/Tablet IMAGES on the PARENT (over 769)
----------------------------------------- */
#topic1, #topic2 {background-repeat: no-repeat; box-shadow: 0 0.8rem .6rem -.03rem rgba(0, 0, 0, 0.2); /* offset-x, offset-y, blur-radius, spread-radius */ }
@media (max-width: 799px) {
#topic1 { background-image: url("/_img/hme/hme-2/hme-2-0800x400.jpg"); }
.webp #topic1 { background-image: url("/_img/hme/hme-2/hme-2-0800x400.webp"); }
#topic2 { background-image: url("/_img/hme/hme-3/hme-3-0800x400.jpg"); }
.webp #topic2 { background-image: url("/_img/hme/hme-3/hme-3-0800x400.webp"); }
}
@media (min-width: 800px)  {
#topic1 { background-image: url("/_img/hme/hme-2/hme-2-1200x600.jpg"); }
.webp #topic1 { background-image: url("/_img/hme/hme-2/hme-2-1200x600.webp"); }
#topic2 { background-image: url("/_img/hme/hme-3/hme-3-1200x600.jpg"); }
.webp #topic2 { background-image: url("/_img/hme/hme-3/hme-3-1200x600.webp"); }
}
@media (min-width: 1200px) {
#topic1 { background-image: url("/_img/hme/hme-2/hme-2-1600x800.jpg"); }
.webp #topic1 { background-image: url("/_img/hme/hme-2/hme-2-1600x800.webp"); }
#topic2 { background-image: url("/_img/hme/hme-3/hme-3-1600x800.jpg"); }
.webp #topic2 { background-image: url("/_img/hme/hme-3/hme-3-1600x800.webp"); }
}
@media (min-width: 1630px) {
#topic1, #topic2 {border-radius: 20px; box-shadow: 0 0.8rem 1.25rem rgba(0, 0, 0, 0.20);}
}

@media only print {
.btn.btn-blu {display: none;}
#intro-hme {box-shadow: none;}
}