.articles-index-page { background:#f4f4f2; }
.articles-index-page .breadcrumbs { padding-top:24px; }
.articles-title { padding:clamp(54px,7vw,110px) 0 clamp(34px,4vw,62px); }
.articles-title h1 { margin:0; font-size:clamp(54px,6vw,92px); line-height:.94; letter-spacing:-.055em; }
.articles-index-page .inner-hero { min-height:500px; grid-template-columns:1fr; padding-bottom:18px; }
.articles-index-page .inner-hero__content { align-items:center; justify-content:center; min-height:500px; padding:80px 40px; border-radius:44px; text-align:center; }
.articles-index-page .inner-hero__content::after { width:520px; height:520px; right:-250px; top:-280px; }
.articles-index-page .inner-hero__content::before { content:""; position:absolute; width:320px; height:320px; left:-190px; bottom:-220px; border:1px solid rgba(231,32,46,.12); border-radius:50%; box-shadow:0 0 0 38px rgba(231,32,46,.025),0 0 0 76px rgba(231,32,46,.015); }
.articles-index-page .inner-hero h1 { max-width:900px; margin:20px 0 26px; font-size:clamp(54px,6vw,96px); line-height:.92; }
.articles-index-page .inner-hero__content>p { max-width:600px; font-size:clamp(18px,1.4vw,24px); }
.articles-index-page .inner-hero__actions,.articles-index-page .inner-hero__media { display:none; }
.articles-index-page .internal-section { margin-top:18px; margin-bottom:56px; padding:clamp(26px,3.2vw,58px); border-radius:44px; background:#fff; }

.articles-toolbar { display:grid; grid-template-columns:minmax(230px,.8fr) auto minmax(280px,1fr); align-items:center; gap:18px; margin-bottom:46px; }
.articles-toolbar__select,.articles-toolbar__search { position:relative; }
.articles-toolbar select,.articles-toolbar input { width:100%; height:58px; border:1px solid transparent; border-radius:999px; background:#f3f3f5; color:#151515; font:inherit; font-size:14px; font-weight:700; outline:none; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.articles-toolbar select { appearance:none; padding:0 48px 0 24px; cursor:pointer; }
.articles-toolbar__select::after { content:"⌄"; position:absolute; right:23px; top:50%; transform:translateY(-55%); pointer-events:none; font-size:18px; }
.articles-toolbar input { padding:0 26px 0 52px; }
.articles-toolbar__search::before { content:""; position:absolute; z-index:1; left:23px; top:50%; width:14px; height:14px; border:2px solid currentColor; border-radius:50%; transform:translateY(-58%); opacity:.7; }
.articles-toolbar__search::after { content:""; position:absolute; z-index:1; left:36px; top:34px; width:7px; height:2px; background:currentColor; transform:rotate(45deg); opacity:.7; }
.articles-toolbar select:focus-visible,.articles-toolbar input:focus-visible { border-color:#e7202e; background:#fff; box-shadow:0 0 0 4px rgba(231,32,46,.12); }
.articles-toolbar__tabs { display:flex; justify-content:center; gap:8px; }
.articles-filter { height:52px; padding:0 24px; border:1px solid #d8d8dc; border-radius:999px; background:#fff; color:#59595f; font:inherit; font-size:12px; font-weight:800; text-transform:uppercase; cursor:pointer; transition:.2s ease; }
.articles-filter:hover,.articles-filter.is-active { border-color:#e7202e; background:#e7202e; color:#fff; }

.article-directory { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; border:0; }
.article-directory-card { position:relative; min-width:0; min-height:440px; padding:228px 22px 24px; overflow:hidden; border:0; border-radius:30px; background:#f0f1f3; color:#121212; transition:transform .25s ease,box-shadow .25s ease,background .25s ease; }
.article-directory-card::before { content:""; position:absolute; inset:0 0 auto; height:205px; border-radius:30px 30px 0 0; background:#e8e8e8 center top/cover no-repeat; transition:filter .3s ease; }
.article-directory-card::after { content:"↗"; position:absolute; right:20px; bottom:20px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#fff; color:#e7202e; font-size:18px; font-weight:800; }
.article-directory-card:hover { background:#f8e9e9; box-shadow:0 22px 50px rgba(17,17,17,.09); transform:translateY(-5px); }
.article-directory-card:hover::before { filter:saturate(1.04); }
.article-directory-card small { position:relative; z-index:1; display:block; margin-bottom:16px; color:#c91f2b; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.article-directory-card h2 { position:relative; z-index:1; margin:0 0 14px; font-size:clamp(22px,1.55vw,29px); line-height:1.04; letter-spacing:-.035em; }
.article-directory-card p { position:relative; z-index:1; display:none; }
.article-directory-card b { position:relative; z-index:1; margin-top:auto; padding-right:45px; color:#c91f2b; font-size:11px; text-transform:uppercase; }
.article-directory-card:nth-child(1)::before { background-image:url('/assets/articles/first-aid-dogs.jpg'); }
.article-directory-card:nth-child(2)::before { background-image:url('/assets/articles/new-puppy.jpg'); background-position:left top; }
.article-directory-card:nth-child(3)::before { background-image:url('/assets/articles/first-aid-cats.jpg'); }
.article-directory-card:nth-child(4)::before { background-image:url('/assets/articles/senior-dog-care.jpg'); }
.article-directory-card:nth-child(5)::before { background-image:url('/assets/services/grooming-photo.jpg'); }
.article-directory-card:nth-child(6)::before { background-image:url('/assets/services/oncology-photo.jpg'); }
.article-directory-card:nth-child(7)::before { background-image:url('/assets/services/cat.webp'); }
.article-directory-card:nth-child(8)::before { background-image:url('/assets/services/vaccination-photo.jpg'); }
.article-directory-card:nth-child(9)::before { background-image:url('/assets/services/red-dog.webp'); }
.article-directory-card:first-child { grid-column:1/-1; min-height:460px; padding:64px 58% 58px 50px; border:1px solid #ededed; background:#fff; }
.article-directory-card:first-child::before { inset:0 0 0 auto; width:54%; height:100%; border-radius:0 30px 30px 0; }
.article-directory-card:first-child::after { right:calc(54% + 32px); bottom:42px; width:50px; height:50px; background:#e7202e; color:#fff; }
.article-directory-card:first-child small { margin-bottom:auto; }
.article-directory-card:first-child h2 { max-width:600px; margin:auto 0 18px; font-size:clamp(44px,5vw,76px); line-height:.94; }
.article-directory-card:first-child p { display:block; max-width:540px; margin:0 0 28px; color:rgba(0,0,0,.62); font-size:17px; line-height:1.5; }
.article-directory-card[hidden] { display:none; }
.articles-empty { grid-column:1/-1; padding:70px 24px; border-radius:28px; background:#f4f4f5; color:rgba(0,0,0,.58); text-align:center; font-size:18px; }
.medical-disclaimer { margin-top:30px; border:0; border-radius:18px; background:#f4f4f5; }

@media (max-width:1180px) {
  .articles-toolbar { grid-template-columns:1fr 1fr; }
  .articles-toolbar__tabs { grid-column:1/-1; grid-row:2; justify-content:flex-start; }
  .article-directory { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .articles-index-page .breadcrumbs { padding-top:8px; }
  .articles-title { padding:42px 0 30px; }
  .articles-title h1 { font-size:46px; }
  .articles-index-page .inner-hero { width:calc(100% - 20px); min-height:400px; margin-inline:10px; }
  .articles-index-page .inner-hero__content { min-height:400px; padding:56px 24px; border-radius:30px; }
  .articles-index-page .inner-hero h1 { font-size:clamp(48px,15vw,70px); }
  .articles-index-page .internal-section { width:calc(100% - 20px); margin-inline:10px; padding:22px; border-radius:30px; }
  .articles-toolbar { grid-template-columns:1fr; gap:12px; margin-bottom:28px; }
  .articles-toolbar__tabs { grid-column:auto; grid-row:auto; order:3; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:thin; justify-content:flex-start; padding:0 2px 10px; }
  .articles-filter { flex:0 0 auto; scroll-snap-align:start; }
  .article-directory { grid-template-columns:1fr; }
  .article-directory-card,.article-directory-card:first-child { grid-column:auto; min-height:470px; padding:250px 24px 24px; }
  .article-directory-card:first-child::before { inset:0 0 auto; width:100%; height:225px; border-radius:30px 30px 0 0; }
  .article-directory-card:first-child::after { right:20px; bottom:20px; width:42px; height:42px; }
  .article-directory-card:first-child small { margin-bottom:16px; }
  .article-directory-card:first-child h2 { margin:0 0 14px; font-size:38px; }
  .article-directory-card:first-child p { display:none; }
}