/* /Writing/writing.css — compact */

/* Local vars (standalone safety) */
:root{
  --jd-nearly-blk: 		#151D0A;
  --jd-cream:  			#F8EDC2;
  --jd-mustard:    		#f6a921;
  --jd-welly:  			#384d3e;
  --jd-olive: 			#4f6139;
  --jd-olive-light: 	#6a7a53;
  --jd-red:    			#e6462d;
}

/* Layout */
.wrap-articles{ padding:0 10px; }

form.search{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 12px; }
.search input{
  flex:1; min-width:240px; padding:10px; border:1px solid #ddd; border-radius:8px;
  background:#fff; color:#000;
}
.search button{
  padding:10px 14px; border:1px solid var(--jd-nearly-blk); background:var(--jd-nearly-blk);
  color:#fff; border-radius:8px; cursor:pointer;
}

/* Grid */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }

@media (min-width:1200px){
  
  .meta.overlay-bl .title{   font-size: calc(var(--h2, 30px) + 15px); }
  .meta.overlay-bl .subtitle{font-size: calc(var(--h3, 15px) + 7px); }
}

/* ≤960px: 2 columns + smaller titles */
@media (max-width:960px){
  .grid{ grid-template-columns: repeat(2,1fr); }
  .meta.overlay-bl .title{   font-size: calc(var(--h2, 30px) + 5px); }
  .meta.overlay-bl .subtitle{font-size: calc(var(--h3, 15px) + 2px); }
}

/* ≤640px: 1 column + smallest titles */
@media (max-width:640px){
  .grid{ grid-template-columns: 1fr; }
  .meta.overlay-bl .title{   font-size: calc(var(--h2, 30px) + 8px); }
  .meta.overlay-bl .subtitle{font-size: calc(var(--h3, 15px) + 3px); }
}

/* Card */
.card{
  position:relative; overflow:hidden;
  background:var(--jd-nearly-blk);
  display:flex; flex-direction:column;
  padding:10px;
  transition:background-color .5s ease;
}
.card:hover{ background:var(--jd-brown); }

@media (prefers-reduced-motion:reduce){ .card{ transition:none; } }

.card a{ color:inherit; text-decoration:none; }

/* Bottom-left text overlay */
.card .overlay-bl{
  position:absolute; left:15px; bottom:15px; z-index:2;
  display:flex; flex-direction:column;
  max-width:calc(100% - 10px - 60px); /* space for top-right badges */
}

/* DEBUG: prove this rule is live (remove after): */
/* .card .overlay-bl .line > span { outline:1px dashed lime; } */

/* Solid, zero-height-impact chips */
.card .overlay-bl .line > span{
  --chip-thick: 0.85em;   /* band thickness */
  --chip-offset: 0.10em;  /* raise this to move band UP */

  display:inline;
  color:var(--jd-cream);
  padding:0 .05em;        /* horizontal only */
  line-height:inherit;
  font-size:inherit;

  /* use your defined var here */
  background-image: linear-gradient(var(--jd-nearly-blk), var(--jd-nearly-blk));
  background-repeat: no-repeat;
  background-size: 100% var(--chip-thick);
  background-position: 0 calc(100% - var(--chip-offset));

  box-shadow: inset 0 calc(var(--chip-thick) * -1 + var(--chip-offset)) 0 var(--jd-nearly-blk);

  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}


/* Headings in overlay (tight metrics): small tweak */
.card .overlay-bl .title.line > span,
.card .overlay-bl .subtitle.line > span{
  --chip-thick: 0.80em;
  --chip-offset: 0.25em;    /* increase to move band UP */
}

/* Date (p1): slightly thicker, centred for tiny line-height */
.card .overlay-bl p.p1.line > span{
  --chip-thick: 0.95em;
  --chip-offset: 0.00em;
  padding:0 .20em;          /* keep horizontal only */
}

/* Fade overlay text to mustard when a grid card is hovered/focused */
.grid .card .overlay-bl .line>span{
  transition: color .25s ease;
}
.grid .card:hover .overlay-bl .line>span,
.grid .card:focus-within .overlay-bl .line>span{
  color: var(--jd-mustard);
}

/* If your headings include links, make them inherit on hover too */
.grid .card .overlay-bl .title a,
.grid .card .overlay-bl .subtitle a{
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}
.grid .card:hover .overlay-bl .title a,
.grid .card:hover .overlay-bl .subtitle a,
.grid .card:focus-within .overlay-bl .title a,
.grid .card:focus-within .overlay-bl .subtitle a{
  color: var(--jd-mustard);
}

/* (Optional) a tad more contrast by dimming the chip band on hover */
.grid .card:hover .overlay-bl .line>span{
  /* keep the band but slightly lighter so mustard pops */
  box-shadow: inset 0 calc(var(--chip-thick, .85em) * -1 + var(--chip-offset, .10em)) 0 rgba(21,29,10,.9);
  background-image: linear-gradient(rgba(21,29,10,.8), rgba(21,29,10,.8));
}

/*
.grid .card .thumb:hover{
	opacity: 100%;
}*/

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .grid .card .overlay-bl .line>span,
  .grid .card .overlay-bl .title a,
  .grid .card .overlay-bl .subtitle a{ transition: none; }
}





/* Constrain thumbs to a tidy crop */
.thumb{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;   /* ← key line: enforces a fixed box */
  height:auto;            /* let aspect-ratio compute the height */
  object-fit:cover;       /* crop to fill the box */
  background:var(--jd-nearly-blk);       /* nice fallback while loading */
	opacity: 60%;
}

/* Safari/legacy fallback if aspect-ratio isn’t supported */
@supports not (aspect-ratio: 1 / 1){
  .thumb{ height:220px; } /* pick a size you like (e.g. 200–260px) */
}


/* No-image fallback */
.card.no-thumb .overlay-bl{
  position:static; max-width:none; padding-top:10px;
}
.card.no-thumb .overlay-tr{
  position:static; margin-top:5px; pointer-events:auto;
}


/* B A D G E S */

/* Overlay stays top-right */
.card .overlay-tr{
  position:absolute; top:85px; right:15px; z-index:3;
  display:flex; flex-direction:column; gap:10px;
  pointer-events:none;
  padding:12px; /* safe space from edges */
}

/* 45° ribbon with fixed visual size */
.badges .badge{
  --bg: var(--jd-olive);
  --fg: var(--jd-cream);
  --w: 160px;      /* visual length along the ribbon */
  --h: 18px;       /* ribbon thickness */
  --radius: 6px;

  position: relative;
  display:inline-flex; align-items:center; justify-content:center;
  width: var(--w); height: var(--h);
  background: var(--bg); color: var(--fg);
  border-radius: var(--radius);
  padding: 0 10px;
  white-space: nowrap;

  /* anchor to the corner consistently */
  transform-origin: top right;
  transform: translate(36%, -36%) rotate(45deg);
  pointer-events:auto;

  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--h4) - 4px);
  text-transform: uppercase;
  line-height: 1;
}

/* keep text upright */
.badges .badge > span{ display:inline-block; transform: rotate(-45deg); }

/* colour variants */
.badges .badge.b-prem{ --bg: var(--jd-red); --fg: var(--fg); }

.badges .badge.b-ovr{ --bg: transparent; color: var(--fg);}

.badges .badge.b-free{ --bg: var(--jd-olive); --fg: var(--fg); }

.badges .badge{
  transition:
    background-color .35s ease,
    color .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}

/* when a card is hovered or focused, tint the ribbons */
.grid .card:hover .overlay-tr .badge,
.grid .card:focus-within .overlay-tr .badge{
  --bg: var(--jd-nearly-blk);
  --fg: var(--jd-mustard);
}

/* (optional) tiny pop on hover/focus for the group */
.grid .card:hover .overlay-tr .badge,
.grid .card:focus-within .overlay-tr .badge{
  filter: brightness(1.05);
}






/* Articles LIST */

/* dashed divider with centered year */
.year-divider{
  display:flex; align-items:center; gap:.6em;
  margin:14px 0 8px;
}
.year-divider::before,
.year-divider::after{
  content:""; flex:1 1 auto;
  border-bottom:1px dashed rgba(248,237,194,.45);
}
.year-divider > span{
  font:500 12px/14px "Courier New", monospace;
  color:var(--jd-cream);
  text-transform:uppercase; letter-spacing:.03em;
}

/* list mode: clean rows, no overlay chips/thumbs */

/* base list styles (keep your existing if already set) */
.list-section .list-item{
  padding:10px 8px;
  border-bottom:1px dashed rgba(248,237,194,.25);
  background:transparent;
  transition: background-color .5s ease, color .25s ease;
}
.list-section .list-item a{
  display:block;
  text-decoration:none;
  color:inherit; /* inherit from row */
}

/* titles/subtitles keep clean line-height */
.list-section .title{ margin:0 0 2px; line-height:1.0; }
.list-section .subtitle{ margin:0 0 2px; line-height:1.0; }

/* hover + keyboard focus state (focus-within for <a> inside) */
.list-section .list-item:hover,
.list-section .list-item:focus-within{
  background: var(--jd-welly);
  color: var(--jd-mustard);
}

/* make sure links and small date text take the color too */
.list-section .list-item:hover a,
.list-section .list-item:focus-within a,
.list-section .list-item:hover .p1,
.list-section .list-item:focus-within .p1{
  color: var(--jd-mustard);
}

/* optional: soften the dashed divider color on hover */
.list-section .list-item:hover { border-bottom-color: rgba(247,170,33,.35); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .list-section .list-item{ transition:none; }
}


/* ensure list rendering doesn't use grid overlays */
.list-section .overlay-bl{ position:static; left:auto; bottom:auto; max-width:none; }
.list-section .line > span{ background:none; padding:0; }

/* Let list titles/subtitles inherit the row color */
.list-section .title,
.list-section .subtitle{
  color: inherit;                   /* override global h2/h3 color */
  transition: color .25s ease;
}

/* Make heading links inherit too */
.list-section .title a,
.list-section .subtitle a{
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}

/* Row hover/focus color */
.list-section .list-item:hover,
.list-section .list-item:focus-within{
  background: var(--jd-welly);
  color: var(--jd-mustard);
}

/* Ensure everything in the row follows the color */
.list-section .list-item:hover a,
.list-section .list-item:focus-within a,
.list-section .list-item:hover .p1,
.list-section .list-item:focus-within .p1{
  color: var(--jd-mustard);
}


/* SERP (possibly move?) */

.results-bar {
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
}

.results-bar span {
	color: var(--jd-mustard);
}

mark.hl{
  background: transparent;
  color: var(--jd-mustard);
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}


.p1.snippet{ padding-top: 10px; opacity:.85; }

.search-results .list-item + .list-item{
  margin-top: 10px;
  padding-top: 10px;
  /* border-top: 1px solid rgba(248,237,194,.18); /* jd-cream @ ~18% */ */
}