/* Digital You CIC — blog archive + single-post design layer.

   Templates 89 (archive) and 88 (single post) already carried custom classes
   — dy-blog-hero / dy-blog-grid / dy-blog-cards, dy-post-hero / dy-post-title /
   dy-post-body / dy-post-content — but NO stylesheet anywhere targeted them.
   So both templates rendered at Elementor/Hello defaults: the archive H1 "Blog"
   came out at body-ish size on white, and single posts opened on a small
   unstyled title with no header treatment. This is that missing sheet.

   Markup facts this is written against (verified against rendered output):
   - every container is `e-con-full`, so there is NO .e-con-inner to target
   - archive uses the CARDS skin: .elementor-post__card wraps .elementor-post__text
     (title / excerpt / read-more) with .elementor-post__meta-data as a SIBLING
     after it — meta is pulled above the title with flex order
   - columns are already set by Elementor (grid-3 / tablet-2 / mobile-1), so this
     sheet does not redefine the grid, only the cards inside it
   - the featured-image widget emits NOTHING when a post has no thumbnail — it is
     absent from the DOM, not empty. Posts 59/60/61 currently have none, so both
     the cards and the single hero fall back to a brand gradient panel. Set a
     featured image later and it slots straight in, no CSS change needed.

   Reversible: delete this file + dycic-load-blog-design.php.
   Author: lukeduff.co.uk */

/* ============================================================
   §0 NEUTRALISE the templates' own Custom CSS
   ------------------------------------------------------------
   Templates 88 and 89 each carry a full stylesheet in Elementor's page-level
   Custom CSS field (_elementor_page_settings['custom_css']), compiled out to
   uploads/elementor/css/post-88.css and post-89.css. It is invisible to this
   repo — grepping the codebase for these class names finds nothing — which is
   exactly why it went unnoticed. Verbatim copies are kept beside this file as
   dycic-template-8X-custom-css.removed-20jul.css.reference.

   That layer is an earlier light-grey treatment. It conflicts with this sheet
   in ways plain load order does NOT resolve, so each conflict is killed here:
     · .e-con.dy-post-hero{max-width:760px!important} pinned the single-post
       band to a 760px island instead of a full-bleed band
     · .dy-blog-hero has a grey bg + border-bottom — the bg loses to this sheet
       on load order, but the border survived as a stray hairline under the curve
     · .dy-post-content>* re-constrains every child to 712px, double-constraining
       the article column inside this sheet's 740px .dy-post-body
     · .dy-blog-cards .elementor-post paints a card on the OUTER article while
       this sheet paints one on the INNER .elementor-post__card — two borders,
       two shadows and two hover transforms stacked

   The tidier fix is to clear that custom_css field so this sheet is the single
   source of truth; that needs a live-DB write, so it is left for Luke to approve.
   Until then these overrides are load-bearing — do not "tidy them away".
   ============================================================ */

.e-con.dy-post-hero{ max-width:none!important; }

.dy-blog-hero{ border-bottom:0!important; }

/* undo the per-child 712px column; .dy-post-body owns the measure now */
.dy-post-content > *{
  max-width:none;
  padding-left:0;
  padding-right:0;
  box-sizing:border-box;
}

/* the outer article is a plain wrapper — .elementor-post__card is the surface */
.dy-blog-cards .elementor-post{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  transform:none;
}

.dy-blog-cards .elementor-post:hover{
  transform:none;
  box-shadow:none;
  border-color:transparent;
}

/* ============================================================
   Shared brand hero band — archive header + single-post header
   Same language as the homepage hero (.elementor-10 .hero): radial blue
   with a curved white bottom edge, shallower here as on inner pages.
   ============================================================ */

/* !important throughout this sheet on width/max-width is deliberate, not lazy:
   Elementor's generated per-template CSS (post-88.css / post-89.css) sets these
   via .elementor-88 .elementor-element.elementor-element-dyph1 — specificity
   (0,3,0), which beats any plain class selector. Template 88's hero container
   carries an explicit max-width:760px, and both body containers fall back to
   100%, so without these the band renders as a 760px island and the article
   column runs the full 1295px. Verified with getComputedStyle, not assumed. */

.dy-blog-hero,
.dy-post-hero{
  background:var(--blue,#144e8c);
  position:relative;
  overflow:hidden;
  display:block;
  width:100%!important;
  max-width:none!important;
  padding:78px 24px 104px;
  text-align:center;
}

.dy-blog-hero::before,
.dy-post-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(125% 95% at 72% 6%,#1c63ad 0%,#144e8c 56%);
  z-index:0;
}

.dy-blog-hero::after,
.dy-post-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 -2px 0;
  height:60px;
  background:#fff;
  border-radius:100% 100% 0 0 / 60px 60px 0 0;
  z-index:2;
}

.dy-blog-hero > *,
.dy-post-hero > *{
  position:relative;
  z-index:3;
  max-width:860px!important;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}

/* ============================================================
   Blog archive — header
   ============================================================ */

.dy-blog-title .elementor-heading-title{
  font-family:"Source Sans 3",sans-serif;
  color:#fff!important;
  font-weight:800;
  font-size:clamp(42px,6vw,68px);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}

/* the sub-line is a second heading widget with header_size:p */
.dy-blog-sub{ margin-top:18px; }

.dy-blog-sub .elementor-heading-title{
  font-family:"Source Sans 3",sans-serif;
  color:rgba(255,255,255,.86)!important;
  font-size:clamp(17px,1.9vw,20px);
  font-weight:400;
  line-height:1.6;
  letter-spacing:normal;
  max-width:60ch;
  margin:0 auto;
}

/* ============================================================
   Blog archive — card grid
   Columns come from Elementor (grid-3 / tablet-2 / mobile-1); only the
   gutter and the card interiors are set here.
   ============================================================ */

.dy-blog-grid{
  width:100%!important;
  max-width:1160px!important;
  margin-left:auto;
  margin-right:auto;
  padding:64px 24px 88px;
}

/* grid columns AND gutters are owned by the widget's own settings
   (grid-3 / tablet-2 / mobile-1, archive_cards_row_gap:35px) — deliberately
   not redefined here, so Sharon can change them in Elementor and it sticks */

.dy-blog-cards article.elementor-post{
  margin:0;
  padding:0;
}

/* --- the card surface --- */
.dy-blog-cards .elementor-post__card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid rgba(20,78,140,.10);
  border-radius:var(--radius,20px);
  overflow:hidden;
  box-shadow:0 2px 4px rgba(16,63,115,.04),0 12px 28px rgba(16,63,115,.07);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}

.dy-blog-cards article.elementor-post:hover .elementor-post__card{
  transform:translateY(-4px);
  border-color:rgba(22,190,207,.38);
  box-shadow:0 4px 8px rgba(16,63,115,.06),0 20px 44px rgba(16,63,115,.13);
}

.dy-blog-cards article.elementor-post:focus-within .elementor-post__card{
  border-color:var(--turquoise,#16becf);
  box-shadow:0 0 0 3px rgba(22,190,207,.28);
}

/* --- card media: real thumbnail --- */
.dy-blog-cards .elementor-post__thumbnail__link{
  display:block;
  order:-2;
  margin:0;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--mist,#f4f7fb);
}

.dy-blog-cards .elementor-post__thumbnail{
  height:100%;
  padding:0!important;
}

.dy-blog-cards .elementor-post__thumbnail img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}

.dy-blog-cards article.elementor-post:hover .elementor-post__thumbnail img{
  transform:scale(1.045);
}

/* --- card media fallback: post has no featured image ---
   The light source shifts per card (nth-child(3n+1/2/3)) so a grid of
   image-less posts reads as a designed set rather than one tile copy-pasted.
   Delete nothing here when real featured images land — this simply stops
   applying, because the :not(:has(...)) guard goes false. */
.dy-blog-cards .elementor-post__card:not(:has(.elementor-post__thumbnail__link))::before{
  content:"";
  order:-2;
  display:block;
  width:100%;
  aspect-ratio:16/10;
  background:
    radial-gradient(60% 90% at 82% 12%,rgba(22,190,207,.42) 0%,rgba(22,190,207,0) 62%),
    radial-gradient(70% 100% at 12% 92%,rgba(121,97,170,.34) 0%,rgba(121,97,170,0) 66%),
    linear-gradient(140deg,#1c63ad 0%,#144e8c 60%,#103f73 100%);
}

.dy-blog-cards .elementor-grid-item:nth-child(3n+2) .elementor-post__card:not(:has(.elementor-post__thumbnail__link))::before{
  background:
    radial-gradient(58% 88% at 18% 14%,rgba(22,190,207,.38) 0%,rgba(22,190,207,0) 60%),
    radial-gradient(72% 100% at 88% 88%,rgba(121,97,170,.30) 0%,rgba(121,97,170,0) 64%),
    linear-gradient(200deg,#1c63ad 0%,#144e8c 58%,#103f73 100%);
}

.dy-blog-cards .elementor-grid-item:nth-child(3n+3) .elementor-post__card:not(:has(.elementor-post__thumbnail__link))::before{
  background:
    radial-gradient(64% 92% at 50% 6%,rgba(22,190,207,.34) 0%,rgba(22,190,207,0) 64%),
    radial-gradient(66% 96% at 8% 96%,rgba(206,193,159,.30) 0%,rgba(206,193,159,0) 62%),
    linear-gradient(160deg,#17589c 0%,#144e8c 54%,#0f3c6e 100%);
}

/* --- meta: sits after .elementor-post__text in the DOM, pulled above it --- */
.dy-blog-cards .elementor-post__meta-data{
  order:-1;
  margin:0;
  padding:22px 26px 0;
  border:0;
  font-family:"Source Sans 3",sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-soft,#37689d);
}

/* --- card text --- */
.dy-blog-cards .elementor-post__text{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:10px 26px 26px;
  margin:0;
}

/* no text-wrap:balance here — in a ~330px card it breaks a long title into
   thin ragged lines ("Practical social / value opportunities / for digital
   inclusion") while shorter siblings sit on two full lines. Normal wrapping
   fills the measure and keeps the three cards visually even. */
.dy-blog-cards .elementor-post__title{
  font-family:"Source Sans 3",sans-serif;
  font-size:21px;
  font-weight:800;
  line-height:1.28;
  letter-spacing:-.005em;
  margin:0 0 12px;
}

.dy-blog-cards .elementor-post__title a{
  color:var(--blue,#144e8c);
  text-decoration:none;
}

.dy-blog-cards article.elementor-post:hover .elementor-post__title a{
  color:var(--turq-deep,#0e93a1);
}

.dy-blog-cards .elementor-post__excerpt{
  margin:0 0 20px;
}

.dy-blog-cards .elementor-post__excerpt p{
  font-family:"Source Sans 3",sans-serif;
  font-size:15.5px;
  line-height:1.65;
  color:var(--ink-soft,#37689d);
  margin:0;
}

/* read-more pinned to the card foot so ragged excerpts still line up */
.dy-blog-cards .elementor-post__read-more{
  margin:auto 0 0;
  align-self:flex-start;
  font-family:"Source Sans 3",sans-serif;
  font-size:14.5px;
  font-weight:700;
  color:var(--blue,#144e8c);
  text-decoration:none;
  border-bottom:2px solid rgba(22,190,207,.5);
  padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease;
}

.dy-blog-cards .elementor-post__read-more:hover{
  color:var(--turq-deep,#0e93a1);
  border-color:var(--turquoise,#16becf);
}

/* pagination */
.dy-blog-cards .elementor-pagination{
  margin-top:48px;
  text-align:center;
  font-family:"Source Sans 3",sans-serif;
}

.dy-blog-cards .elementor-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:42px;
  padding:0 12px;
  margin:0 4px;
  border-radius:999px;
  border:1px solid rgba(20,78,140,.14);
  color:var(--blue,#144e8c);
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}

.dy-blog-cards .elementor-pagination .page-numbers:hover{
  background:var(--mist,#f4f7fb);
  border-color:rgba(22,190,207,.45);
}

.dy-blog-cards .elementor-pagination .page-numbers.current{
  background:var(--blue,#144e8c);
  border-color:var(--blue,#144e8c);
  color:#fff;
}

/* ============================================================
   Single post — header band + featured image
   ============================================================ */

.dy-post-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:60px;
}

/* the featured-image widget sits BEFORE the title in template 88; flip the
   order so the title leads the band and the image drops below it, overlapping
   the curve into the white article area as a rounded plate */
.dy-post-hero .elementor-widget-theme-post-title{ order:1; }
.dy-post-hero .elementor-widget-theme-post-featured-image{ order:2; }

.dy-post-title .elementor-heading-title{
  font-family:"Source Sans 3",sans-serif;
  color:#fff!important;
  font-weight:800;
  font-size:clamp(34px,5vw,54px)!important;
  line-height:1.09;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}

/* width in %, NOT vw: qa2.css §2 applies body{zoom:1.1} at >=1200px and vw
   units ignore zoom, so a vw width here would overflow by exactly 10% */
.dy-post-hero .elementor-widget-theme-post-featured-image{
  width:min(1080px,100%)!important;
  max-width:none!important;
  margin:38px auto -110px;
}

.dy-post-hero .elementor-widget-theme-post-featured-image img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-radius:var(--radius,20px);
  box-shadow:0 10px 24px rgba(16,63,115,.16),0 30px 70px rgba(16,63,115,.20);
}

/* no featured image → close the band on the curve, no dead space */
.dy-post-hero:not(:has(.elementor-widget-theme-post-featured-image img)){
  padding-bottom:104px;
}

/* ============================================================
   Single post — article column
   ============================================================ */

.dy-post-body{
  width:100%!important;
  max-width:740px!important;
  margin-left:auto;
  margin-right:auto;
  padding:0 24px 84px;
}

/* clear the overlapping featured plate when one exists */
.elementor-88:has(.elementor-widget-theme-post-featured-image img) .dy-post-body{
  padding-top:138px;
}

.elementor-88:not(:has(.elementor-widget-theme-post-featured-image img)) .dy-post-body{
  padding-top:44px;
}

.dy-post-content{
  font-family:"Source Sans 3",sans-serif;
}

.dy-post-content p,
.dy-post-content li{
  font-size:18.5px;
  line-height:1.72;
  color:var(--ink-soft,#37689d);
  margin:0 0 20px;
}

/* opening paragraph reads as a standfirst */
.dy-post-content .dycic-post-meta + p{
  font-size:21px;
  line-height:1.6;
  color:var(--blue,#144e8c);
  font-weight:400;
}

.dy-post-content h2{
  font-family:"Source Sans 3",sans-serif;
  color:var(--blue,#144e8c);
  font-weight:800;
  font-size:clamp(25px,3vw,31px);
  line-height:1.24;
  letter-spacing:-.01em;
  margin:44px 0 14px;
}

.dy-post-content h3{
  font-family:"Source Sans 3",sans-serif;
  color:var(--blue,#144e8c);
  font-weight:700;
  font-size:21px;
  line-height:1.32;
  margin:32px 0 10px;
}

.dy-post-content strong{ color:var(--blue,#144e8c); }

.dy-post-content a{
  color:var(--blue,#144e8c);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(22,190,207,.55);
}

.dy-post-content a:hover{ color:var(--turq-deep,#0e93a1); }

.dy-post-content ul,
.dy-post-content ol{ margin:0 0 20px; padding-left:22px; }

.dy-post-content blockquote{
  margin:32px 0;
  padding:4px 0 4px 24px;
  border-left:4px solid var(--turquoise,#16becf);
  font-size:21px;
  line-height:1.55;
  color:var(--blue,#144e8c);
}

.dy-post-content blockquote p{
  font-size:inherit;
  color:inherit;
  margin:0;
}

.dy-post-content img{
  max-width:100%;
  height:auto;
  border-radius:14px;
}

/* meta pills injected by dycic-blog.php — left-aligned to the article column.
   Margin is deliberately NOT set here: qa2.css §13 owns it with !important
   (.single-post .dycic-post-meta{margin:14px 0 30px!important}), so setting it
   would be a silent no-op. Change it there, not here. */
.dy-post-content .dycic-post-meta{
  justify-content:flex-start;
}

/* related-links block is appended via the_content, so it lands INSIDE the
   740px column: break it full-bleed and shed the article link styling
   (mirrors the rule dycic-blog.php had for the old pre-Theme-Builder markup) */
.dy-post-content .dycic-related{
  width:100vw;
  margin:72px calc(50% - 50vw) -84px;
}

.dy-post-content .dycic-related a{ text-decoration:none; }
.dy-post-content .dycic-related a:hover{ color:inherit; }

/* qa2.css §2 sets body{zoom:1.1} at >=1200px. vw units ignore zoom, so the
   full-bleed band above overflows by exactly 10% without this rescale. qa2 has
   the same correction but aimed at .single-post .page-content .dycic-related —
   the pre-Theme-Builder selector, which no longer exists in the DOM. */
@media (min-width:1200px){
  .dy-post-content .dycic-related{
    width:calc(100vw / 1.1);
    margin:72px calc(50% - 50vw / 1.1) -84px;
  }
}

/* residual comments UI */
body.single-post #comments,
body.single-post .comments-area,
body.single-post .comment-respond{ display:none!important; }

/* ============================================================
   Responsive
   ============================================================ */

@media(max-width:680px){
  .dy-blog-hero,
  .dy-post-hero{ padding:56px 20px 84px; }

  .dy-blog-title .elementor-heading-title{ font-size:clamp(32px,9vw,42px); }

  .dy-blog-grid{ padding:48px 20px 68px; }

  .dy-post-title .elementor-heading-title{ font-size:clamp(28px,8vw,36px)!important; }

  .dy-post-hero .elementor-widget-theme-post-featured-image{
    width:calc(100vw - 40px);
    margin:28px auto -70px;
  }

  .elementor-88:has(.elementor-widget-theme-post-featured-image img) .dy-post-body{
    padding-top:94px;
  }

  .dy-post-body{
    padding-left:20px;
    padding-right:20px;
    padding-bottom:64px;
  }

  .dy-post-content p,
  .dy-post-content li{ font-size:17.5px; }

  .dy-post-content .dycic-post-meta + p{ font-size:19px; }
}

@media(prefers-reduced-motion:reduce){
  .dy-blog-cards .elementor-post__card,
  .dy-blog-cards .elementor-post__thumbnail img{ transition:none; }
  .dy-blog-cards article.elementor-post:hover .elementor-post__card{ transform:none; }
  .dy-blog-cards article.elementor-post:hover .elementor-post__thumbnail img{ transform:none; }
}