/* Football editorial pages, using the existing site's type and colour tokens. */
.blog-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--muted); font-size:12px; line-height:1.6; }
.blog-breadcrumbs>a { min-height:44px; display:inline-flex; align-items:center; }
.blog-breadcrumbs>a:hover { text-decoration:underline; text-underline-offset:4px; }
.blog-intro { padding-top:12px; padding-bottom:36px; }
.blog-intro-row { display:grid; grid-template-columns:1.1fr 1fr; align-items:end; gap:64px; padding-top:24px; }
.blog-section-name { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--indonesia-red-dark); }
.blog-section-name>.indonesia-flag { width:24px; height:16px; border:1px solid var(--line); border-radius:2px; }
.blog-intro h1 { font-family:'Barlow Condensed',sans-serif; font-size:clamp(42px,5vw,70px); font-weight:700; line-height:1.04; letter-spacing:-1px; max-width:580px; margin-top:16px; }
.blog-intro-copy { border-left:3px solid var(--indonesia-red); padding:4px 0 4px 24px; }
.blog-intro-copy>p { font-size:15px; line-height:1.9; max-width:430px; margin:0; color:#42616f; }
.blog-feature { margin-bottom:64px; }
.blog-feature-link { display:grid; grid-template-columns:1.1fr 1fr; background:var(--deep); color:white; border-radius:12px; overflow:hidden; border:1px solid var(--deep); }
.blog-feature-photo { position:relative; min-height:340px; overflow:hidden; }
.blog-feature-photo:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 65%,var(--deep)); pointer-events:none; }
.blog-feature-photo>img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:52% center; }
.blog-feature-photo>span { position:absolute; left:24px; top:24px; background:white; color:var(--navy); border-left:4px solid var(--indonesia-red); padding:8px 14px; font-size:12px; font-weight:800; z-index:1; }
.blog-feature-copy { padding:40px 36px 40px 32px; align-self:center; }
.blog-feature-copy h2 { font-family:'Barlow Condensed',sans-serif; font-size:clamp(30px,3vw,43px); line-height:1.12; letter-spacing:-.4px; margin:16px 0; }
.blog-feature-copy>p { color:#d6e2e6; font-size:14px; line-height:1.85; max-width:450px; }
.blog-feature-copy>.button { margin-top:24px; font-size:14px; gap:28px; border:1px solid #ffffff24; }
.blog-feature-link:hover .button { background:var(--indonesia-red-dark); }
.blog-card-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; font-size:11px; font-weight:600; line-height:1.6; color:var(--muted); }
.blog-card-meta>span:first-child { color:var(--indonesia-red-dark); }
.blog-feature-copy .blog-card-meta { justify-content:flex-start; color:#d6e2e6; }
.blog-feature-copy .blog-card-meta>span:first-child { color:white; }
.blog-catalogue { padding-bottom:72px; }
.blog-catalogue-heading { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:20px; }
.blog-catalogue-heading>h2 { font-size:30px; }
.blog-count { font-size:12px; color:var(--muted); white-space:nowrap; }
.blog-filters { display:flex; flex-wrap:wrap; gap:10px; padding-bottom:28px; }
.blog-filters[hidden] { display:none; }
.blog-filters>button { font-family:inherit; border:1px solid var(--line); border-radius:6px; min-height:44px; padding:10px 16px; background:white; color:var(--navy); font-size:12px; font-weight:700; cursor:pointer; }
.blog-filters>button[aria-pressed=true] { background:var(--navy); color:white; border-color:var(--navy); }
.blog-filters>button:hover { border-color:var(--navy); }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:stretch; }
.blog-card { min-width:0; }
.blog-card[hidden] { display:none; }
.blog-card>a { display:flex; height:100%; flex-direction:column; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:white; }
.blog-card-art { aspect-ratio:5/3; overflow:hidden; border-bottom:1px solid var(--line); }
.blog-card-art>img { display:block; width:100%; height:100%; object-fit:cover; }
.blog-card-copy { display:flex; flex-direction:column; padding:24px; flex:1; }
.blog-card h3 { font-size:21px; letter-spacing:-.5px; line-height:1.4; margin:16px 0 12px; }
.blog-card-copy>p { font-size:13px; line-height:1.85; color:#42616f; margin-bottom:20px; }
.blog-read { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding-top:16px; margin-top:auto; border-top:1px solid var(--line); font-size:13px; font-weight:800; color:var(--indonesia-red-dark); }
.blog-read>.icon { width:19px; height:19px; }
.blog-card>a:hover h3 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.blog-card>a:hover .blog-read { color:var(--navy); }
.blog-page .navigation a[aria-current=page],.blog-post-page .navigation a[aria-current=page] { color:var(--indonesia-red-dark); }
.blog-page .site-footer,.blog-post-page .site-footer { margin-top:0; }
.blog-post-header { background:var(--pale); border-bottom:1px solid var(--line); padding:12px 0 44px; }
.blog-post-heading { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:48px; align-items:center; padding-top:24px; }
.blog-post-heading h1 { font-family:'Barlow Condensed',sans-serif; font-size:clamp(35px,4vw,55px); line-height:1.12; font-weight:700; letter-spacing:-.6px; margin:16px 0; max-width:800px; }
.blog-post-heading>div>p { max-width:740px; font-size:15px; line-height:1.9; color:#42616f; }
.blog-post-heading>img { width:100%; height:auto; border-radius:8px; }
.blog-byline { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; font-size:11px; color:var(--muted); margin-top:24px; }
.blog-byline>span:first-child { font-weight:800; color:var(--navy); }
.blog-reading .prose .blog-lead { font-size:18px; color:var(--navy); line-height:1.8; }
.blog-reading .prose figure { width:min(100%,600px); margin:28px auto 36px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:white; }
.blog-reading .prose figure>.content-image { width:100%; height:auto; margin:0; border-radius:0; }
.blog-reading .prose figure>figcaption { margin:0; padding:14px 16px; border-top:1px solid var(--line); font-size:14px; }
.blog-reading .prose caption { text-align:left; color:var(--navy); font-weight:700; padding-bottom:12px; }
.blog-reading .prose table { margin:28px 0; }
.blog-reading .prose th { font-size:13px; }
.blog-reading .prose th,.blog-reading .prose td { min-width:90px; }
.blog-reading .back-top>.icon { transform:rotate(180deg); }
.blog-more { padding-bottom:72px; }
.blog-more>h2 { font-size:28px; margin-bottom:24px; }
.blog-more .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.blog-more .blog-card>a { display:grid; grid-template-columns:160px minmax(0,1fr); }
.blog-more .blog-card-art { height:100%; aspect-ratio:auto; border:0; }
.blog-more .blog-card-art>img { object-fit:cover; }
.blog-more .blog-card h3 { font-size:18px; }
.blog-more .blog-card-copy { padding:20px; }
.blog-more .blog-card-copy>p { display:none; }
@media(max-width:1024px) {
  .blog-intro-row { gap:32px; }
  .blog-feature-copy { padding:32px 28px; }
  .blog-feature-photo { min-height:340px; }
  .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .blog-post-heading { grid-template-columns:minmax(0,1fr) 180px; gap:32px; }
  .blog-more .blog-card>a { display:flex; }
  .blog-more .blog-card-art { height:auto; aspect-ratio:5/3; }
}
@media(max-width:700px) {
  .blog-intro { padding-bottom:28px; }
  .blog-intro-row { display:block; padding-top:12px; }
  .blog-intro h1 { font-size:46px; max-width:390px; }
  .blog-intro-copy { margin-top:24px; padding-left:18px; }
  .blog-intro-copy>p { font-size:14px; }
  .blog-feature { margin-bottom:40px; }
  .blog-feature-link { grid-template-columns:minmax(0,1fr); }
  .blog-feature-photo { min-height:0; height:auto; aspect-ratio:16/9; }
  .blog-feature-photo:after { background:linear-gradient(180deg,transparent 65%,var(--deep)); }
  .blog-feature-photo>span { left:18px; top:18px; }
  .blog-feature-copy { padding:20px 22px 26px; }
  .blog-feature-copy h2 { font-size:34px; }
  .blog-feature-copy>.button { width:100%; justify-content:space-between; }
  .blog-catalogue-heading>h2 { font-size:27px; }
  .blog-filters { gap:8px; padding-bottom:24px; }
  .blog-filters>button { font-size:11px; padding-inline:12px; }
  .blog-grid,.blog-more .blog-grid { grid-template-columns:minmax(0,1fr); }
  .blog-card-copy { padding:22px; }
  .blog-card h3 { font-size:23px; }
  .blog-catalogue,.blog-more { padding-bottom:44px; }
  .blog-post-header { padding-bottom:28px; }
  .blog-post-heading { display:block; padding-top:16px; }
  .blog-post-heading>img { width:min(100%,360px); margin-top:20px; }
  .blog-post-heading h1 { font-size:39px; }
  .blog-post-heading>div>p { font-size:14px; }
  .blog-byline { gap:8px 16px; line-height:1.8; }
  .blog-reading .prose .blog-lead { font-size:17px; }
}