/* Home — Our Beloved Breeds */
/* Every top-level product category as a tile, or just the ones listed in
   the "Category IDs" field (pages/home/breeds.php). Photos are the
   categories' own admin images, so the grid fills itself as the shop grows. */
.breeds-grid { padding: 70px 0; }

.breeds-grid__title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin:          0 0 32px;
    font-size:       36px;
    line-height:     44px;
    font-weight:     500;
    text-align:      center;
    color:           var(--color-text);
}
.breeds-grid__title-mark { display: inline-flex; color: var(--color-primary); }

.breeds-grid__list {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap:                   26px 22px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

/* A plain white card, framed — the photo sits inset from the frame with its
   own rounded corners, the name sits in a flat white footer below it. */
.breed-tile {
    display:         block;
    padding:         10px;
    border:          1px solid var(--color-pink-100);
    border-radius:   14px;
    background:      #ffffff;
    box-shadow:       0 1px 3px rgba(20, 20, 25, 0.06), 0 6px 16px rgba(20, 20, 25, 0.05);
    text-decoration: none;
    transition:      transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.breed-tile:hover {
    transform:    translateY(-3px);
    border-color: var(--color-primary);
    box-shadow:   0 4px 10px rgba(20, 20, 25, 0.08), 0 12px 24px rgba(20, 20, 25, 0.08);
}

.breed-tile__media {
    display:       block;
    width:         100%;
    aspect-ratio:  1 / 1;
    border-radius: 8px;
    overflow:      hidden;
    background:    var(--color-pink-50);
}
.breed-tile__media img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}
/* A category with no photo yet keeps its place rather than leaving a hole */
.breed-tile__media--empty {
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-primary);
}

.breed-tile__name {
    display:        block;
    padding:        14px 0 2px;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align:     center;
    color:          var(--color-text);
    transition:     color var(--transition);
}
.breed-tile:hover .breed-tile__name { color: var(--color-primary); }

.breeds-grid__footer {
    display:         flex;
    justify-content: center;
    margin-top:      34px;
}
.breeds-grid__btn { height: 44px; padding: 0 30px; font-size: 14px; }

@media (max-width: 1200px) {
    .breeds-grid__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .breeds-grid { padding: 50px 0; }
    .breeds-grid__title { font-size: 30px; line-height: 38px; margin-bottom: 26px; }
    .breeds-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .breeds-grid { padding: 36px 0; }
    .breeds-grid__title { font-size: 24px; line-height: 31px; margin-bottom: 20px; }
    .breeds-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
    .breeds-grid__footer { margin-top: 26px; }
    .breeds-grid__btn { width: 100%; }
}

/* Home — Search
   The form floats over the bottom edge of the hero. */
.search-section {
    position:   relative;
    z-index:    var(--z-dropdown);
    margin-top: -30px;
}

.search-bar--overlay {
    position:      relative;
    max-width:     1000px;
    margin:        0 auto;
    height:        62px;
    padding:       5px 5px 5px 24px;
    border:        1px solid #ffffff;
    background:    rgba(255, 255, 255, 0.5);
    box-shadow:    0 14px 14px rgba(190, 171, 171, 0.35);
    backdrop-filter: blur(6px);
}

.search-bar__btn { height: 50px; }

/* Live results dropdown (.search-results) is shared with the shop toolbar
   search — see css/main.css. */

@media (max-width: 767px) {
    .search-section { margin-top: -24px; }

    .search-bar--overlay {
        height:  auto;
        padding: 8px 8px 8px 16px;
    }
    .search-bar--overlay .search-bar__input { font-size: 14px; }
    .search-bar__btn {
        height:    40px;
        padding:   0 16px;
        font-size: 14px;
    }
}

/* Home — Hero */

.hero {
    /* Matches .page-hero's --header-space — must include --marquee-height or
       this drifts out of sync with the fixed header whenever the announcement
       bar is on, letting the header cut into the content below */
    --header-space: calc(var(--marquee-height) + var(--topbar-height) + var(--header-height) + var(--header-offset));

    background-image:    var(--hero-bg);
    background-position: 50% 50%;
    background-size:     cover;
    background-repeat:   no-repeat;
    /* Sits under the fixed header, which body padding otherwise pushes down */
    margin-top: calc(-1 * var(--header-space));
}

.hero__wrp {
    display:         flex;
    justify-content: space-between;
    gap:             20px;
    padding:         calc(var(--header-space) + 80px) 0 80px;
}

.hero__content {
    display:        flex;
    flex-direction: column;
    gap:            40px;
    max-width:      630px;
}

.hero__title {
    margin: 0;
}
.hero__title .accent { font-weight: 400; }

.hero__text {
    margin:      0;
    max-width:   630px;
    font-size:   18px;
    line-height: 24px;
}

.hero__actions {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
}

.hero__reviews {
    display: block;
    width:   230px;
    height:  auto;
}

.hero__buttons {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.btn--white {
    background:  #ffffff;
    border-color: #ffffff;
    color:       var(--color-primary);
    font-weight: 500;
    box-shadow:  none;
}
.btn--white:hover {
    background: var(--color-primary);
    color:      #ffffff;
}

/* Overrides .btn--white above (same specificity, later wins) — sized up and
   recolored to the site's secondary green. */
.hero__cta {
    height:       58px;
    padding:      18px 32px;
    font-size:    18px;
    background:   #6cbe88;
    border-color: #6cbe88;
    color:        #ffffff;
}
.hero__cta:hover {
    background:   #5aa873;
    border-color: #5aa873;
    color:        #ffffff;
}

.hero__play {
    background: var(--color-bg-alt);
    color:      var(--color-text);
}
.hero__play:hover { background: #ffffff; }

/* Right column: badge + socials */
.hero__aside {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-end;
    gap:             24px;
    text-align:      right;
}

.hero__badge img {
    display: block;
    width:   100px;
    height:  auto;
}
.hero__badge--mobile { display: none; }

.hero__socials {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    list-style:     none;
    margin:         0;
    padding:        0;
}
.hero__socials a {
    display:    inline-flex;
    transition: opacity var(--transition);
}
.hero__socials a:hover { opacity: 0.75; }

.hero__socials-label {
    margin:      0;
    max-width:   80px;
    font-size:   14px;
    font-weight: 300;
    line-height: 1.6;
    color:       #3b3d42;
}

/* Below 1300 there is no room for the wide photo next to the text: the subject
   gets cropped and the aside lands on her face. The portrait crop takes over
   and the layout stacks — photo on top, content over the gradient underneath.
   Top padding clears the cat; the lower, light part of the dress may sit
   behind the text, which stays readable. */
@media (max-width: 1299px) {
    .hero {
        background-image:    var(--hero-bg-narrow, var(--hero-bg));
        background-position: top center;
    }

    /* Top padding is the height of the photo band: enough to clear the cat,
       which scales with the viewport because the portrait covers by width */
    .hero__wrp {
        position:       relative;
        flex-direction: column;
        padding:        560px 0 60px;
    }

    .hero__content { gap: 20px; max-width: 100%; }
    .hero__title   { font-size: 56px; line-height: 58px; }

    /* Badge and socials float over the empty right side of the portrait,
       clearing the fixed header the hero slides under */
    .hero__aside {
        position: absolute;
        top:      calc(var(--header-space) + 24px);
        right:    0;
    }
}

@media (max-width: 1099px) {
    .hero__wrp { padding-top: 480px; }
}

@media (max-width: 899px) {
    .hero__wrp   { padding-top: 380px; }
    .hero__title { font-size: 48px; line-height: 50px; }
}

@media (max-width: 767px) {
    .hero { margin-top: 0; }

    /* The portrait now scales by height, so the subject clears the title on its own */
    .hero__wrp   { padding: 80px 0 40px; }
    .hero__title { font-size: 40px; line-height: 46px; }

    /* No room for a side column: the badge goes above the title and the
       socials become a row under the buttons */
    .hero__aside {
        position:    static;
        align-items: flex-start;
        text-align:  left;
    }
    .hero__aside .hero__badge,
    .hero__socials-label { display: none; }

    .hero__socials { flex-direction: row; gap: 8px; }

    .hero__badge--mobile {
        display:    block;
        text-align: right;
    }
    .hero__badge--mobile img { margin-left: auto; }

    .hero__text { font-size: 16px; line-height: 20px; }

    .hero__actions {
        flex-direction: column;
        align-items:    flex-start;
        gap:            12px;
    }
}

/* ── Home — Contacts ─────────────────────────────────────────────────────── */
/* Duplicates the real Contact page's info (pages/home/contact.php) rather
   than typing it in twice — this only lays the three columns out: details +
   socials, the enquiry form, and the map.
   The pink runs full-bleed: the background sits on the section itself
   (nothing constrains its width), while .home-contact__band — inside
   .container — keeps the three-column content lined up with every other
   section on the page. */
.home-contact {
    padding:    70px 0;
    background: var(--color-pink-50);
}

.home-contact__band {
    display:               grid;
    grid-template-columns: 0.85fr 1.1fr 1.05fr;
    gap:                   40px;
    align-items:           center;
}

.home-contact__list {
    display:        flex;
    flex-direction: column;
    gap:            18px;
    margin:         0 0 24px;
    padding:        0;
    list-style:     none;
}
.home-contact__list li {
    display:     flex;
    align-items: center;
    gap:         12px;
    font-size:   14px;
    line-height: 20px;
    color:       var(--color-text);
}
.home-contact__list .icon {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      #ffffff;
    color:           var(--color-primary);
}
.home-contact__list a { color: inherit; text-decoration: none; }
.home-contact__list a:hover { color: var(--color-primary); }

.home-contact__socials { display: flex; gap: 10px; }
.home-contact__socials a {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      var(--color-text);
    color:           #ffffff;
    transition:      background var(--transition);
}
.home-contact__socials a:hover { background: var(--color-primary); }

.home-contact__title {
    margin:      0 0 18px;
    font-size:   22px;
    line-height: 29px;
    font-weight: 500;
    color:       var(--color-text);
}

/* The shared JetFormBuilder styling lives in main.css (.jfb-form) — this
   section needs nothing beyond it, the default pink submit button already
   fits a pink card. */
.home-contact__form-col .jfb-form .jet-form-builder-row { margin-bottom: 12px; }

.home-contact__map {
    align-self:    stretch;
    min-height:    260px;
    border-radius: 16px;
    overflow:      hidden;
}
.home-contact__map iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; }

@media (max-width: 1200px) {
    .home-contact__band { grid-template-columns: minmax(0, 1fr); }
    .home-contact__map { min-height: 300px; }
}

@media (max-width: 1024px) {
    .home-contact { padding: 50px 0; }
    .home-contact__band { gap: 32px; }
}

@media (max-width: 767px) {
    .home-contact { padding: 36px 0; }
}

/* ── Google reviews ──────────────────────────────────────────────────────── */
/* The cards inside come from a reviews plugin (pages/home/reviews.php) — the
   theme only sets the band around them and the heading, so a plugin swap
   does not drag styles with it. */
.home-reviews { padding: 80px 0; }

.home-reviews__head {
    max-width:     720px;
    margin:        0 auto 32px;
    text-align:    center;
}

.home-reviews__title {
    margin:      0;
    font-size:   40px;
    line-height: 48px;
    font-weight: 600;
    color:       var(--color-text);
}

.home-reviews__subtitle {
    margin:      10px 0 0;
    font-size:   16px;
    line-height: 24px;
    color:       var(--color-muted);
}

/* The plugin's own markup sets its widths; this only stops a wide carousel
   from spilling the page sideways. */
.home-reviews__widget { max-width: 100%; }

@media (max-width: 1024px) {
    .home-reviews { padding: 60px 0; }
    .home-reviews__title { font-size: 32px; line-height: 40px; }
    .home-reviews__head { margin-bottom: 26px; }
}

@media (max-width: 767px) {
    .home-reviews { padding: 40px 0; }
    .home-reviews__title { font-size: 25px; line-height: 32px; }
    .home-reviews__subtitle { font-size: 14px; line-height: 21px; }
}

/* ── Home — what sets us apart ───────────────────────────────────────────── */
/* Icon disc, heading, a few lines, and a photo on the card's bottom edge
   (pages/home/advantages.php). The photo's top fades into the card rather
   than cutting across it, which is what keeps the two reading as one piece. */
.advantages { padding: 20px 0 80px; }

.advantages__title {
    margin:      0 0 32px;
    font-size:   36px;
    line-height: 44px;
    font-weight: 500;
    text-align:  center;
    color:       var(--color-text);
}

.advantages__list {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   20px;
    align-items:           stretch;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.adv-card {
    --adv-card-px: 22px;

    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            12px;
    /* No bottom padding — the photo sits flush on the card's edge */
    padding:        28px var(--adv-card-px) 0;
    border-radius:  18px;
    background:     var(--color-pink-50);
    overflow:       hidden;
    text-align:     center;
}

.adv-card__icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           74px;
    height:          74px;
    border-radius:   50%;
    background:      #ffffff;
    color:           var(--color-primary);
}

.adv-card__title {
    margin:      0;
    font-size:   19px;
    line-height: 26px;
    font-weight: 700;
    color:       var(--color-text);
}

.adv-card__text {
    margin:      0;
    font-size:   14px;
    line-height: 22px;
    color:       #6b6b70;
}
/* .highlight is the site-wide pink span (main.css) — used here to pick out
   the line that carries the promise, as in the reference */
.adv-card__text .highlight { font-weight: 600; }

/* Pushed to the bottom so cards of different text lengths still line their
   photos up along one edge — pulled out to the card's own horizontal padding
   (--adv-card-px) so the photo spans full width instead of sitting inset. */
.adv-card__media {
    display:     block;
    width:       calc(100% + 2 * var(--adv-card-px));
    margin:      auto calc(-1 * var(--adv-card-px)) 0;
    padding-top: 16px;
}
.adv-card__media img {
    display:    block;
    width:      100%;
    height:     165px;
    object-fit: cover;
    /* Feathers the top edge into the card's pink instead of stopping dead —
       same short 35%-tall fade zone, just spread across more stops so the
       curve eases in gradually instead of jumping most of the way opaque
       in the first 15%. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0.4) 18%, rgba(0, 0, 0, 0.7) 26%, #000 35%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0.4) 18%, rgba(0, 0, 0, 0.7) 26%, #000 35%);
}

@media (max-width: 1200px) {
    .advantages__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .advantages { padding: 10px 0 60px; }
    .advantages__title { font-size: 30px; line-height: 38px; margin-bottom: 26px; }
    .advantages__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adv-card { --adv-card-px: 18px; padding: 24px var(--adv-card-px) 0; }
    .adv-card__title { font-size: 17px; line-height: 24px; }
}

@media (max-width: 767px) {
    .advantages { padding: 6px 0 40px; }
    .advantages__title { font-size: 24px; line-height: 31px; margin-bottom: 20px; }
    .advantages__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .adv-card__icon { width: 64px; height: 64px; }
    .adv-card__text { font-size: 13px; line-height: 20px; }
    .adv-card__media img { height: 185px; }
}

/* ── Home — pull quote ───────────────────────────────────────────────────── */
/* Quote marks are positioned rather than inline: they flank the band at its
   outer edges the way the reference sets them, which text flow cannot do. */
.home-quote { padding: 0 0 70px; }

.home-quote__band {
    position:      relative;
    margin:        0;
    padding:       30px 130px;
    border-radius: 16px;
    background:    var(--color-green-100);
    text-align:    center;
}

.home-quote__mark {
    position:    absolute;
    font-family: Georgia, 'Times New Roman', serif;
    font-size:   62px;
    line-height: 1;
    color:       var(--color-secondary);
    opacity:     0.5;
}
.home-quote__mark--open  { top: 22px; left: 56px; }
.home-quote__mark--close { bottom: 4px; right: 56px; }

.home-quote__text {
    margin:      0;
    font-size:   19px;
    line-height: 30px;
    font-weight: 500;
    color:       var(--color-text);
}

.home-quote__author {
    margin-top:  8px;
    font-size:   13px;
    line-height: 20px;
    font-weight: 700;
    color:       var(--color-secondary);
}

@media (max-width: 1024px) {
    .home-quote { padding-bottom: 50px; }
    .home-quote__band { padding: 26px 80px; }
    .home-quote__mark { font-size: 48px; }
    .home-quote__mark--open  { left: 28px; }
    .home-quote__mark--close { right: 28px; }
    .home-quote__text { font-size: 17px; line-height: 27px; }
}

@media (max-width: 767px) {
    .home-quote { padding-bottom: 36px; }
    /* No room to flank the text at this width — the marks move above and
       below it instead of crowding the lines. */
    .home-quote__band { padding: 44px 22px 40px; }
    .home-quote__mark { font-size: 38px; }
    .home-quote__mark--open  { top: 10px; left: 50%; transform: translateX(-50%); }
    .home-quote__mark--close { bottom: -4px; left: 50%; right: auto; transform: translateX(-50%); }
    .home-quote__text { font-size: 15px; line-height: 24px; }
}

/* ── Home — why choose us ────────────────────────────────────────────────── */
.why { padding: 0 0 80px; }

.why__title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin:          0 0 30px;
    font-size:       36px;
    line-height:     44px;
    font-weight:     500;
    text-align:      center;
    color:           var(--color-text);
}
.why__title-mark { display: inline-flex; color: var(--color-primary); }

/* ── Feature row ── */
.why__features {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   28px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.why-feature {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
}
.why-feature__icon {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    background:      var(--color-green-100);
    color:           #ffffff;
}
.why-feature__body { min-width: 0; }

.why-feature__title {
    margin:      0 0 4px;
    font-size:   16px;
    line-height: 22px;
    font-weight: 700;
    color:       var(--color-text);
}
.why-feature__text {
    margin:      0;
    font-size:   14px;
    line-height: 21px;
    color:       var(--color-muted);
}

.why__actions {
    display:         flex;
    justify-content: center;
    margin:          30px 0 34px;
}
.why__btn { height: 44px; padding: 0 26px; font-size: 14px; }

/* ── Cards ── */
.why__cards {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   20px;
    align-items:           stretch;
}

.why-card {
    display:       flex;
    align-items:   stretch;
    gap:           10px;
    padding:       24px 0 24px 26px;
    border-radius: 16px;
    background:    var(--color-green-100);
    overflow:      hidden;
}

.why-card__body {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            10px;
}

.why-card__title {
    margin:      0;
    font-size:   22px;
    line-height: 29px;
    font-weight: 500;
    color:       var(--color-text);
}
.why-card__text {
    margin:      0;
    font-size:   14px;
    line-height: 21px;
    color:       var(--color-text);
}

.why-card__list {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin:         0;
    padding:        0;
    list-style:     none;
}
.why-card__list li {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    font-size:   14px;
    line-height: 21px;
    color:       var(--color-text);
}
.why-card__tick { flex-shrink: 0; display: flex; margin-top: 3px; color: var(--color-secondary); }

/* Pushed to the bottom so the buttons line up across cards of unequal copy.
   The shared .btn--outline pink-on-transparent reads poorly against this
   card's solid green — dark border/text instead, pink stays for the hover fill. */
.why-card__btn {
    height:       40px;
    margin-top:   auto;
    padding:      0 20px;
    font-size:    14px;
    border-color: var(--color-text);
    color:        var(--color-text);
}

/* Kept whole rather than cropped: two of the three photos here are cut-outs
   that sit on the card's bottom edge, and cover would slice them. */
.why-card__media {
    flex:        0 0 40%;
    display:     flex;
    align-items: flex-end;
    min-width:   0;
}
.why-card__media img {
    display:         block;
    width:           100%;
    max-height:      100%;
    object-fit:      contain;
    object-position: right bottom;
}

@media (max-width: 1200px) {
    .why__features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
    .why__cards { grid-template-columns: minmax(0, 1fr); }
    .why-card__media { flex-basis: 34%; }
}

@media (max-width: 1024px) {
    .why { padding-bottom: 60px; }
    .why__title { font-size: 30px; line-height: 38px; margin-bottom: 24px; }
    .why__actions { margin: 26px 0 28px; }
    .why-card__title { font-size: 20px; line-height: 27px; }
}

@media (max-width: 767px) {
    .why { padding-bottom: 40px; }
    .why__title { font-size: 24px; line-height: 31px; }
    .why__features { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    /* No room for a photo beside the copy — it takes its own row under it */
    .why-card { flex-direction: column; padding: 22px 20px; gap: 16px; }
    .why-card__media { flex: none; height: 190px; }
    .why-card__media img { object-position: center bottom; }
    .why-card__btn { width: 100%; justify-content: center; }
}

/* ── Home — From the blog ────────────────────────────────────────────────── */
/* Real posts (pages/home/blog.php) rather than admin-typed copies — this
   only lays the rows out. */
.home-blog { padding: 0 0 80px; }

.home-blog__head { margin-bottom: 30px; }

.home-blog__title {
    margin:      0;
    font-size:   36px;
    line-height: 44px;
    font-weight: 500;
    text-align:  center;
    color:       var(--color-text);
}

/* Line — heart — line, centered under the title */
.home-blog__rule {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    margin-top:      8px;
    color:           var(--color-primary);
}
.home-blog__rule span {
    width:      44px;
    height:     1px;
    background: var(--color-border, #e6d9de);
}

.home-blog__footer {
    display:         flex;
    justify-content: center;
    margin-top:      30px;
}

.home-blog__link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-size:       14px;
    font-weight:     600;
    color:           var(--color-primary);
    text-decoration: none;
    white-space:     nowrap;
}
.home-blog__link:hover { text-decoration: underline; }
.home-blog__link svg { transition: transform var(--transition); }
.home-blog__link:hover svg { transform: rotate(180deg); }

.home-blog__list {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.home-blog__row {
    display:       flex;
    align-items:   center;
    gap:           24px;
    padding:       14px;
    border-radius: 16px;
    background:    var(--color-pink-50);
}

.home-blog__media {
    flex-shrink:   0;
    display:       block;
    width:         180px;
    aspect-ratio:  3 / 2;
    border-radius: 10px;
    overflow:      hidden;
    background:    #ffffff;
}
.home-blog__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.home-blog__body { flex: 1; min-width: 0; }

.home-blog__cat {
    display:        inline-block;
    margin-bottom:  6px;
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.home-blog__row-title {
    margin:      0;
    font-size:   19px;
    line-height: 26px;
    font-weight: 600;
}
.home-blog__row-title a {
    color:           var(--color-text);
    text-decoration: none;
}
.home-blog__row-title a:hover { color: var(--color-primary); }

.home-blog__excerpt {
    margin:      6px 0 0;
    font-size:   14px;
    line-height: 21px;
    color:       var(--color-text);
    /* Rows aren't fixed-height, so this only guards against an unusually
       long excerpt pushing a single row much taller than its neighbours. */
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:            hidden;
}

.home-blog__more {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-size:       14px;
    font-weight:     600;
    color:           var(--color-primary);
    text-decoration: none;
}
.home-blog__more:hover { text-decoration: underline; }
.home-blog__more svg { transition: transform var(--transition); }
.home-blog__more:hover svg { transform: translateX(3px); }

@media (max-width: 1024px) {
    .home-blog { padding-bottom: 60px; }
    .home-blog__title { font-size: 30px; line-height: 38px; }
    .home-blog__media { width: 140px; }
}

@media (max-width: 767px) {
    .home-blog { padding-bottom: 40px; }
    .home-blog__title { font-size: 24px; line-height: 31px; }

    .home-blog__row { flex-wrap: wrap; gap: 14px; }
    .home-blog__media { width: 100px; }
    .home-blog__row-title { font-size: 16px; line-height: 22px; }
    .home-blog__more { width: 100%; justify-content: flex-end; }
}

/* ── Home — Instagram mockup ─────────────────────────────────────────────── */
/* No live Instagram connection — every number and photo is typed into Home →
   "Instagram" (pages/home/instagram.php) and styled to read as a profile.
   Kept static on purpose: nothing here breaks when an API token expires. */
.insta { padding: 70px 0; }

.insta__grid {
    display:               grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items:           center;
    gap:                   40px;
    padding:               46px;
    border-radius:         24px;
    background:            var(--color-green-100);
}

.insta__intro { position: relative; }

.insta__title {
    position:    relative;
    margin:      0 0 14px;
    font-size:   32px;
    line-height: 40px;
    font-weight: 500;
    color:       var(--color-text);
}
.insta__scribble {
    position: absolute;
    top:      -14px;
    left:     calc(100% - 6px);
    color:    var(--color-secondary);
    opacity:  0.55;
}

.insta__text {
    max-width:   360px;
    margin:      0 0 22px;
    font-size:   15px;
    line-height: 23px;
    color:       var(--color-text);
}

.insta__btn {
    display:      inline-flex;
    align-items:  center;
    gap:          8px;
    height:       48px;
    padding:      0 26px;
    font-size:    14px;
}

/* ── Card ── */
.insta-card {
    border-radius: 20px;
    background:    #ffffff;
    box-shadow:    0 18px 40px rgba(90, 40, 60, 0.1);
    overflow:      hidden;
}

.insta-card__bar {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       18px 22px;
    border-bottom: 1px solid var(--color-pink-50);
}
.insta-card__back {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           30px;
    height:          30px;
    border-radius:   50%;
    background:      var(--color-text);
    color:           #ffffff;
}
.insta-card__handle {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    font-size:   15px;
    font-weight: 700;
    color:       var(--color-text);
}

.insta-card__profile {
    display:       flex;
    align-items:   center;
    gap:           16px;
    padding:       20px 22px 22px;
}
.insta-card__avatar {
    flex-shrink:   0;
    display:       block;
    width:         64px;
    height:        64px;
    border-radius: 50%;
    overflow:      hidden;
    background:    var(--color-pink-50);
}
.insta-card__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.insta-card__meta { display: flex; flex-direction: column; gap: 8px; }
.insta-card__name { font-size: 13px; color: var(--color-muted); }
.insta-card__stats {
    display: flex;
    gap:     18px;
    font-size: 14px;
    color:     var(--color-text);
}
.insta-card__stats strong { font-weight: 700; }

.insta-card__grid {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   4px;
    margin:                0;
    padding:               0 4px 4px;
    list-style:            none;
}
.insta-card__grid li { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; }
.insta-card__grid img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
    .insta { padding: 50px 0; }
    .insta__grid { grid-template-columns: minmax(0, 1fr); padding: 32px; gap: 32px; }
    .insta__intro { text-align: center; }
    .insta__text { margin-left: auto; margin-right: auto; }
    .insta__scribble { display: none; }
    .insta-card { max-width: 420px; margin: 0 auto; width: 100%; }
}

@media (max-width: 767px) {
    .insta { padding: 36px 0; }
    .insta__grid { padding: 24px 18px; border-radius: 18px; }
    .insta__title { font-size: 26px; line-height: 33px; }
    .insta-card__stats { gap: 12px; font-size: 13px; }
}