/* ── AATG Homepage Hero — v1.1.0 light + orange ────────────────────────── */

.aatg-hhero {
    position: relative;
    width: 100%;
    background: #ffffff;
    overflow: hidden;
    padding: 48px 24px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border-bottom: 1px solid #ececec;
}

.aatg-hhero__inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

/* ── Left: tagline / headline / featured card ────────────────────────────── */
.aatg-hhero__tagline {
    color: #e2731f;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 10px;
    animation: aatg-hh-fadeup .6s ease both;
}

.aatg-hhero__headline {
    color: #111111;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 26px;
    animation: aatg-hh-fadeup .6s .08s ease both;
}
.aatg-hhero__headline em {
    font-style: normal;
    color: #f08434;
}

.aatg-hhero__featured {
    display: grid;
    grid-template-columns: 260px 1fr;
    background: #fafaf8;
    border: 1px solid #e7e7e3;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    animation: aatg-hh-fadeup .6s .16s ease both;
}
.aatg-hhero__featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(0,0,0,.12);
    border-color: rgba(240,132,52,.5);
}

.aatg-hhero__featured-img {
    min-height: 200px;
    background-size: cover;
    background-position: center;
}

.aatg-hhero__featured-body {
    padding: 22px 24px;
}

.aatg-hhero__cat {
    display: inline-block;
    background: rgba(240,132,52,.12);
    border: 1px solid rgba(240,132,52,.35);
    color: #e2731f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: 4px 12px;
    margin-bottom: 10px;
}

.aatg-hhero__featured-title {
    color: #111111;
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 10px;
}

.aatg-hhero__featured-excerpt {
    color: #555;
    font-size: .92rem;
    line-height: 1.6;
    margin: 0 0 14px;
}

.aatg-hhero__readmore {
    color: #f08434;
    font-size: .88rem;
    font-weight: 700;
}
.aatg-hhero__featured:hover .aatg-hhero__readmore { text-decoration: underline; }

/* ── Category chips ──────────────────────────────────────────────────────── */
.aatg-hhero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    animation: aatg-hh-fadeup .6s .24s ease both;
}
.aatg-hhero__chip {
    background: #f4f4f1;
    border: 1px solid #e3e3df;
    color: #333;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 100px;
    padding: 7px 16px;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.aatg-hhero__chip:hover {
    background: rgba(240,132,52,.12);
    border-color: rgba(240,132,52,.45);
    color: #e2731f;
}

/* ── Right: trending list ────────────────────────────────────────────────── */
.aatg-hhero__side {
    background: #fafaf8;
    border: 1px solid #e7e7e3;
    border-radius: 18px;
    padding: 22px;
    animation: aatg-hh-fadeup .6s .2s ease both;
}

.aatg-hhero__side-title {
    color: #111;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.aatg-hhero__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aatg-hhero__item + .aatg-hhero__item {
    border-top: 1px solid #ececea;
}

.aatg-hhero__item a {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    text-decoration: none;
}

.aatg-hhero__rank {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240,132,52,.14);
    color: #e2731f;
    font-size: .8rem;
    font-weight: 800;
    border-radius: 8px;
}

.aatg-hhero__item-title {
    display: block;
    color: #222;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.4;
    transition: color .15s;
}
.aatg-hhero__item a:hover .aatg-hhero__item-title { color: #f08434; }

.aatg-hhero__item-meta {
    display: block;
    color: #999;
    font-size: .75rem;
    margin-top: 3px;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes aatg-hh-fadeup {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Tablet / Mobile ─────────────────────────────────────────────────────── */
@media ( max-width: 920px ) {
    .aatg-hhero__inner { grid-template-columns: 1fr; gap: 28px; }
}

@media ( max-width: 640px ) {
    .aatg-hhero { padding: 36px 16px; }
    .aatg-hhero__featured { grid-template-columns: 1fr; }
    .aatg-hhero__featured-img { min-height: 180px; }
    .aatg-hhero__featured-body { padding: 18px; }
}

/* ══ World Region Map ═════════════════════════════════════════════════════ */

.aatg-hmap {
    background: #fafaf8;
    padding: 56px 24px;
    border-bottom: 1px solid #ececec;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.aatg-hmap__inner { max-width: 1180px; margin: 0 auto; text-align: center; }

.aatg-hmap__title {
    color: #111;
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 8px;
}
.aatg-hmap__title em { font-style: normal; color: #f08434; }

.aatg-hmap__sub {
    color: #777;
    font-size: .95rem;
    margin: 0 0 30px;
}

.aatg-hmap__map {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
}
.aatg-hmap__svg { width: 100%; height: auto; display: block; }

/* Pins */
.aatg-hmap__pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    z-index: 2;
}

.aatg-hmap__dot {
    width: 16px;
    height: 16px;
    background: #e02d2d;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(224,45,45,.5);
    position: relative;
}
.aatg-hmap__dot::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(224,45,45,.5);
    animation: aatg-pin-pulse 2s ease-out infinite;
}

@keyframes aatg-pin-pulse {
    0%   { transform: scale(.6); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.aatg-hmap__label {
    background: #fff;
    border: 1px solid #e7e7e3;
    color: #222;
    font-size: .78rem;
    font-weight: 700;
    border-radius: 100px;
    padding: 4px 12px;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.aatg-hmap__pin:hover .aatg-hmap__label {
    background: #f08434;
    border-color: #f08434;
    color: #fff;
    transform: translateY(-2px);
}

/* ══ Animal Category Grid ═════════════════════════════════════════════════ */

.aatg-hcats {
    background: #ffffff;
    padding: 56px 24px;
    border-bottom: 1px solid #ececec;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.aatg-hcats__inner { max-width: 1180px; margin: 0 auto; text-align: center; }

.aatg-hcats__title {
    color: #111;
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 8px;
}
.aatg-hcats__title em { font-style: normal; color: #f08434; }

.aatg-hcats__sub {
    color: #777;
    font-size: .95rem;
    margin: 0 0 30px;
}

.aatg-hcats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.aatg-hcats__card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fafaf8;
    border: 1px solid #e7e7e3;
    border-radius: 14px;
    padding: 16px 18px;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.aatg-hcats__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.1);
    border-color: rgba(240,132,52,.5);
}

.aatg-hcats__emoji { font-size: 1.6rem; }
.aatg-hcats__name {
    color: #222;
    font-size: .95rem;
    font-weight: 700;
    flex: 1;
    text-align: left;
}
.aatg-hcats__arrow {
    color: #f08434;
    font-weight: 800;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s, transform .15s;
}
.aatg-hcats__card:hover .aatg-hcats__arrow { opacity: 1; transform: translateX(0); }

@media ( max-width: 920px ) {
    .aatg-hcats__grid { grid-template-columns: repeat(3, 1fr); }
}
@media ( max-width: 640px ) {
    .aatg-hcats__grid { grid-template-columns: repeat(2, 1fr); }
    .aatg-hcats__card { padding: 13px 14px; }
    .aatg-hmap__label { font-size: .68rem; padding: 3px 9px; }
    .aatg-hmap__dot   { width: 12px; height: 12px; border-width: 2px; }
}

/* ══ v2: Map panel upgrades ═══════════════════════════════════════════════ */
.aatg-hmap__panel {
    background: linear-gradient(180deg, #fdfcfa 0%, #f6f4ef 100%);
    border: 1px solid #e7e7e3;
    border-radius: 24px;
    padding: 28px 28px 18px;
    box-shadow: 0 24px 70px rgba(0,0,0,.07);
    max-width: 980px;
    margin: 0 auto;
}
.aatg-hmap__dots circle { fill: #d9d4c9; }
.aatg-hmap__dots circle:nth-child(7n)  { fill: #cfc9bc; }
.aatg-hmap__dots circle:nth-child(11n) { fill: #e3ded4; }
.aatg-hmap__pin .aatg-hmap__dot {
    width: 18px; height: 18px;
    background: radial-gradient(circle at 35% 30%, #ff6b4a, #e02d2d 70%);
}
.aatg-hmap__stats {
    display: flex; justify-content: center; gap: 38px;
    border-top: 1px solid #ecebe5;
    margin-top: 18px; padding-top: 16px; flex-wrap: wrap;
}
.aatg-hmap__stat { text-align: center; }
.aatg-hmap__stat strong { display: block; color: #f08434; font-size: 1.25rem; font-weight: 800; }
.aatg-hmap__stat span   { color: #888; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 640px) {
    .aatg-hmap__panel { padding: 14px 12px 10px; border-radius: 16px; }
    .aatg-hmap__stats { gap: 20px; }
}

/* ══ v2: Article card sections (records / pets) ═══════════════════════════ */
.aatg-harts { padding: 56px 24px; border-bottom: 1px solid #ececec;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.aatg-harts--records { background: #fff; }
.aatg-harts--pets    { background: #fafaf8; }
.aatg-harts__inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.aatg-harts__title { color: #111; font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.aatg-harts__title em { font-style: normal; color: #f08434; }
.aatg-harts__sub { color: #777; font-size: .95rem; margin: 0 0 30px; }
.aatg-harts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.aatg-harts__card { background: #fff; border: 1px solid #e7e7e3; border-radius: 16px; overflow: hidden;
  text-decoration: none; text-align: left; transition: transform .18s, box-shadow .18s, border-color .18s;
  display: flex; flex-direction: column; }
.aatg-harts__card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.12); border-color: rgba(240,132,52,.5); }
.aatg-harts__img { position: relative; aspect-ratio: 16/10; background-size: cover; background-position: center; }
.aatg-harts__badge { position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,.95);
  color: #e2731f; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 100px; padding: 4px 12px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.aatg-harts__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.aatg-harts__name { color: #111; font-size: 1rem; font-weight: 800; line-height: 1.35; margin: 0; flex: 1; }
.aatg-harts__read { color: #f08434; font-size: .85rem; font-weight: 700; }
.aatg-harts__card:hover .aatg-harts__read { text-decoration: underline; }
.aatg-harts__more { display: inline-block; margin-top: 24px; color: #f08434; font-weight: 700; font-size: .92rem; text-decoration: none; }
.aatg-harts__more:hover { text-decoration: underline; }
@media (max-width: 760px) { .aatg-harts__grid { grid-template-columns: 1fr; } }

/* ══ v2: Video section ════════════════════════════════════════════════════ */
.aatg-hvids { background: #fafaf8; padding: 56px 24px; border-bottom: 1px solid #ececec;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.aatg-hvids__inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.aatg-hvids__title { color: #111; font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.aatg-hvids__title em { font-style: normal; color: #f08434; }
.aatg-hvids__sub { color: #777; font-size: .95rem; margin: 0 0 30px; }
.aatg-hvids__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.aatg-hvids__card { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden;
  border: 1px solid #e7e7e3; box-shadow: 0 10px 30px rgba(0,0,0,.08); background: #000; }
.aatg-hvids__thumb { position: absolute; inset: 0; width: 100%; height: 100%; border: none; cursor: pointer;
  background-size: cover; background-position: center; transition: transform .25s; }
.aatg-hvids__card:hover .aatg-hvids__thumb { transform: scale(1.04); }
.aatg-hvids__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 62px; height: 62px; display: flex; align-items: center; justify-content: center;
  background: rgba(240,132,52,.95); color: #fff; font-size: 1.3rem; border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0,0,0,.35); padding-left: 5px; transition: transform .15s, background .15s; }
.aatg-hvids__card:hover .aatg-hvids__play { transform: translate(-50%,-50%) scale(1.1); background: #f08434; }
.aatg-hvids__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.aatg-hvids__more { display: inline-block; margin-top: 24px; color: #f08434; font-weight: 700; font-size: .92rem; text-decoration: none; }
.aatg-hvids__more:hover { text-decoration: underline; }
@media (max-width: 760px) { .aatg-hvids__grid { grid-template-columns: 1fr; } }

/* ══ v2.1.1: Theme-override hardening ═════════════════════════════════════
   Trellis (and other themes) bleed styles into our sections: underlined
   links, serif/justified headings, flex on h1. Force our design. */

.aatg-hhero a, .aatg-hmap a, .aatg-hcats a, .aatg-harts a, .aatg-hvids a,
.aatg-hhero a:hover, .aatg-harts a:hover, .aatg-hcats a:hover {
    text-decoration: none !important;
    box-shadow: none !important;
}

.aatg-hhero__headline, .aatg-hhero__featured-title,
.aatg-hmap__title, .aatg-hcats__title, .aatg-harts__title, .aatg-hvids__title,
.aatg-harts__name, .aatg-hhero__side-title, .aatg-hhero__item-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    display: block !important;
    text-align: inherit;
    text-transform: none;
}

.aatg-hhero__headline {
    display: block !important;
    text-align: left !important;
    white-space: normal !important;
}
.aatg-hhero__headline em,
.aatg-hmap__title em, .aatg-hcats__title em,
.aatg-harts__title em, .aatg-hvids__title em {
    display: inline !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.aatg-hmap__title, .aatg-hcats__title, .aatg-harts__title, .aatg-hvids__title {
    text-align: center !important;
}

/* keep card text tidy regardless of theme link styles */
.aatg-harts__card *, .aatg-hcats__card *, .aatg-hhero__featured * {
    text-decoration: none !important;
}

/* theme sometimes justifies paragraph text */
.aatg-hhero__featured-excerpt, .aatg-hmap__sub, .aatg-hcats__sub,
.aatg-harts__sub, .aatg-hvids__sub {
    text-align: inherit !important;
    hyphens: none !important;
}

/* ══ v2.2: Intro hero with animal search ══════════════════════════════════ */

.aatg-hintro {
    background:
        radial-gradient(1200px 500px at 50% -200px, rgba(240,132,52,.10), transparent 70%),
        #ffffff;
    padding: 64px 20px 56px;
    border-bottom: 1px solid #ececec;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.aatg-hintro__inner { max-width: 660px; margin: 0 auto; }

.aatg-hintro__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #e7e7e3;
    color: #555;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: 8px 18px;
    margin-bottom: 22px;
    box-shadow: 0 3px 14px rgba(0,0,0,.06);
    animation: aatg-hh-fadeup .6s ease both;
}

.aatg-hintro__eyebrow {
    color: #f08434;
    font-size: clamp(1rem, 2.4vw, 1.3rem);
    font-weight: 700;
    margin: 0 0 2px;
    animation: aatg-hh-fadeup .6s .06s ease both;
}

.aatg-hintro__headline {
    color: #111 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: clamp(2.2rem, 7vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
    margin: 0 0 18px;
    display: block !important;
    text-align: center !important;
    animation: aatg-hh-fadeup .6s .12s ease both;
}
.aatg-hintro__headline em {
    font-style: normal;
    color: #f08434;
    display: inline !important;
}

.aatg-hintro__text {
    color: #666;
    font-size: clamp(.95rem, 2vw, 1.08rem);
    line-height: 1.7;
    margin: 0 0 30px;
    animation: aatg-hh-fadeup .6s .18s ease both;
}

/* search card */
.aatg-hintro__search {
    display: flex;
    gap: 8px;
    background: #fff;
    border: 1px solid #e7e7e3;
    border-radius: 18px;
    padding: 8px;
    box-shadow: 0 18px 50px rgba(0,0,0,.10);
    animation: aatg-hh-fadeup .6s .24s ease both;
}
.aatg-hintro__search:focus-within {
    box-shadow: 0 18px 50px rgba(0,0,0,.12), 0 0 0 3px rgba(240,132,52,.35);
}

.aatg-hintro__input {
    flex: 1;
    min-width: 0;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fafaf8;
    padding: 14px 16px;
    font-size: 1rem;
    color: #111;
    outline: none;
}
.aatg-hintro__input::placeholder { color: #9ca3af; }

.aatg-hintro__btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #f08434, #e2731f);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 15px rgba(240,132,52,.4);
}
.aatg-hintro__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 25px rgba(240,132,52,.5); }

/* try chips */
.aatg-hintro__tries {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
    animation: aatg-hh-fadeup .6s .3s ease both;
}
.aatg-hintro__tries-label { color: #999; font-size: .85rem; font-weight: 600; }
.aatg-hintro__try {
    background: #f4f4f1;
    border: 1px solid #e3e3df;
    color: #444;
    font-size: .84rem;
    font-weight: 600;
    border-radius: 100px;
    padding: 7px 16px;
    text-decoration: none !important;
    transition: background .15s, border-color .15s, color .15s;
}
.aatg-hintro__try:hover {
    background: rgba(240,132,52,.12);
    border-color: rgba(240,132,52,.45);
    color: #e2731f;
}

/* mobile: stack search vertically like the reference */
@media (max-width: 560px) {
    .aatg-hintro { padding: 44px 16px 44px; }
    .aatg-hintro__search { flex-direction: column; border-radius: 20px; }
    .aatg-hintro__btn { width: 100%; padding: 15px; }
}