/* ==========================================================================
   SmartEdge — Blog
   Layout from packagedesign/06_BLOG/01_MOCKUPS/Blog_Main_Page_Desktop_Approved.png
   and Blog_Detail_Page_Desktop_Approved.png.
   Depends on main.css, components.css and pages.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.se-phero--blog .se-phero__media{justify-content:flex-end}
.se-phero--blog .se-phero__img{max-width:520px}

/* --------------------------------------------------------------------------
   2. Article rows — image always left, content always right

   06_BLOG/03_BLOG_MAIN/CONTENT_STRUCTURE.md: "The approved visual keeps the
   image on the LEFT for every post and the content on the RIGHT."

   components.css defines .se-postrow as a two-column grid because the search
   results template (template-parts/post-list.php) puts the media and the body
   directly inside it. The blog archive wraps both inside a single .se-postrow__link
   so the whole card is one link, which means the grid has to live on that link.
   Leaving both grids in place nested the row inside the 260px image column: the
   body collapsed to zero width, the text overflowed, and the image grew to the
   full height of the overflowing row. The modifier class below gives the two
   structures one card each and removes the conflict.
   -------------------------------------------------------------------------- */
/* The archive body sits directly above the closing CTA band, which already
   carries its own internal padding. Padding the bottom of the body as well
   stacked two bands of whitespace into one 138px gap before the band, so the
   bottom half is dropped here and the band alone sets the separation. */
.se-blogbody{padding-block:var(--se-flow-y) 0}
.se-blogs__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.se-blogs__title{font-size:var(--se-h2-size);line-height:1.2;margin:0 0 .35rem}
.se-blogs__intro{margin:0;font-size:.9375rem;color:var(--se-ink-soft);max-width:56ch}
.se-blogs__search-note{font-size:.875rem;color:var(--se-ink-soft);background:var(--se-mist);border-radius:var(--se-radius-sm);padding:10px 14px;margin:0 0 18px}
.se-blogs__search-note a{margin-left:8px;font-weight:600}

/* The list item is the card surface, not a grid. */
.se-postrow--card{display:block}
.se-postrow--card .se-postrow__link{
  display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);gap:20px;
  text-decoration:none;color:inherit;align-items:stretch;
}
/*
 * The photo fills the left column and is cropped, never scaled to fit.
 *
 * The image is taken out of flow so the media box can stretch to the row height
 * without the aspect ratio re-deriving its width from that height. An earlier
 * version put aspect-ratio on the media itself: once the grid stretched the
 * box, the width was recomputed from the stretched height and the photo
 * overflowed its 236px column. object-fit:cover keeps the crop controlled and
 * the picture undistorted at every viewport.
 */
.se-postrow__media{position:relative;display:block;overflow:hidden;min-height:190px;background:var(--se-blue-soft);border-radius:0}
.se-postrow__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s var(--se-ease)}
.se-postrow:hover .se-postrow__img{transform:scale(1.04)}
.se-postrow__date{
  position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:8px;background:#fff;box-shadow:var(--se-shadow);
  font-family:var(--se-font-head);font-size:.6875rem;font-weight:700;color:var(--se-navy);line-height:1.2;
  white-space:nowrap;
}
.se-postrow__date .se-icon{color:var(--se-orange);flex:none}
.se-postrow__body{padding:20px 22px 20px 0;display:flex;flex-direction:column;gap:9px;min-width:0}
.se-postrow__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.75rem;color:var(--se-ink-faint)}
.se-postrow__cat{font-family:var(--se-font-head);font-weight:700;color:var(--se-orange-ink);background:color-mix(in srgb,var(--se-orange) 11%,transparent);border-radius:var(--se-radius-pill);padding:3px 10px}
.se-postrow__read{display:inline-flex;align-items:center;gap:5px}
.se-postrow__read::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--se-line);flex:none}
.se-postrow__title{margin:0;font-family:var(--se-font-head);font-size:1.1875rem;font-weight:800;color:var(--se-navy);line-height:1.35}
.se-postrow:hover .se-postrow__title{color:var(--se-orange-ink)}
.se-postrow__excerpt{font-size:.9375rem;line-height:1.65;color:var(--se-ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.se-postrow__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--se-line-soft)}
.se-postrow__more{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:7px 14px;border:1px solid var(--se-line);border-radius:var(--se-radius-pill);
  font-family:var(--se-font-head);font-size:.8125rem;font-weight:700;color:var(--se-navy);
  transition:border-color .2s var(--se-ease),background-color .2s var(--se-ease),color .2s var(--se-ease);
}
.se-postrow:hover .se-postrow__more{border-color:var(--se-orange);color:var(--se-orange-ink)}
.se-postrow__more .se-icon{color:var(--se-orange);transition:transform .2s var(--se-ease)}
.se-postrow:hover .se-postrow__more .se-icon{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   3. Sidebars

   components.css sets ".se-widget a { display: block }" for the plain category
   and tag lists. That selector is more specific than a single class, so these
   two thumbnail rows have to be scoped to the widget as well or they fall back
   to display:block and the image grows to its full natural size.
   -------------------------------------------------------------------------- */
.se-popular{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.se-widget .se-popular__link{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:8px;text-decoration:none;color:inherit}
.se-widget .se-popular__link:hover{background:#fff}
.se-popular__media{display:block;flex:0 0 auto;width:56px;height:42px;border-radius:6px;overflow:hidden;background:var(--se-blue-soft)}
.se-popular__img{width:100%;height:100%;object-fit:cover;display:block}
.se-popular__body{display:flex;flex-direction:column;min-width:0}
.se-popular__title{font-family:var(--se-font-head);font-size:.8125rem;font-weight:700;color:var(--se-navy);line-height:1.4}
.se-popular__date{font-size:.6875rem;color:var(--se-ink-faint);margin-top:2px}

.se-widget .se-related__link{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:8px;text-decoration:none;color:inherit}
.se-widget .se-related__link:hover{background:#fff}
.se-related__img{flex:none;width:64px;height:48px;border-radius:6px;object-fit:cover;display:block}
.se-related__body{display:flex;flex-direction:column;min-width:0}
.se-related__title{font-family:var(--se-font-head);font-size:.8125rem;font-weight:700;color:var(--se-navy);line-height:1.4}
.se-related__text{font-size:.75rem;color:var(--se-ink-soft);margin-top:2px;line-height:1.45}

/* --------------------------------------------------------------------------
   4. Article detail
   -------------------------------------------------------------------------- */
.se-article{padding-block:var(--se-flow-y)}
.se-article__cat{
  display:inline-block;margin-bottom:12px;padding:4px 12px;border-radius:var(--se-radius-pill);
  background:color-mix(in srgb,var(--se-orange) 11%,transparent);
  font-family:var(--se-font-head);font-size:.75rem;font-weight:800;color:var(--se-orange-ink);
}
.se-article__byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.875rem;color:var(--se-ink-soft)}
.se-article__hero{border-radius:var(--se-radius);overflow:hidden;margin-bottom:26px;background:var(--se-blue-soft)}
.se-article__hero img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* --------------------------------------------------------------------------
   Figures inside an article.

   Six photographs are placed through each article, one per section. They are
   part of the prose rather than a gallery bolted beside it, so they take the
   content measure, sit between paragraphs, and are never framed: a bordered,
   captioned plate every two paragraphs reads as a slideshow and interrupts the
   line of argument the article is making.

   No figcaption is written, so nothing here has to reserve space for one. The
   alternative text carries the description instead, which is where a screen
   reader reads it from anyway.
   -------------------------------------------------------------------------- */
.se-article-figure{
  margin:30px 0;
  max-width:100%;
}
.se-article-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--se-radius);
  background:var(--se-blue-soft);
}
.se-article-figure:first-child{margin-top:0}

@media (max-width:640px){
  .se-article-figure{margin:24px 0}
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1280px){
  .se-listing{grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(0,260px)}
  .se-postrow--card .se-postrow__link{grid-template-columns:minmax(0,210px) minmax(0,1fr)}
}

@media (max-width:1100px){
  .se-listing{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
  .se-listing .se-sidebar--right{grid-column:1/-1;position:static;grid-template-columns:repeat(2,minmax(0,1fr));display:grid;gap:18px;align-items:start}
}

@media (max-width:900px){
  .se-postrow--card .se-postrow__link{grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:18px}
  .se-postrow__body{padding:16px 18px 16px 0}
}

@media (max-width:820px){
  .se-listing{grid-template-columns:1fr}
  .se-sidebar{position:static}
  .se-sidebar--left{order:2}
  .se-listing .se-sidebar--right{grid-template-columns:1fr}
}

/* Single column: the image sits above the content, as the responsive guide asks. */
@media (max-width:640px){
  .se-postrow--card .se-postrow__link{grid-template-columns:1fr}
  .se-postrow__media{min-height:0;aspect-ratio:16/9}
  .se-postrow__img{position:absolute}
  .se-postrow__body{padding:16px 18px 18px}
  .se-blogs__head{flex-direction:column;align-items:flex-start}
  .se-postrow__foot{align-items:flex-start;flex-direction:column;gap:12px}
  .se-postrow__more{align-self:stretch;justify-content:center}
}

/* ========================================================== The byline block ==
 *
 * The editorial profile at the foot of an article.
 *
 * It is a section with a top rule rather than a card. A card here would be one
 * more bordered rectangle in a column that already carries the article, the tag
 * row and the back link, and it would enclose the one piece of metadata on the
 * page that is not the article. The rule does the separating and the whitespace
 * does the rest.
 *
 * The mark is a 56px circle rather than the 28px one the listing rows use: at the
 * foot of the article this is a portrait slot, not an inline credit, and at 28px
 * a drawn avatar's subject mark is not legible at all.
 */
.se-authorbox{
  margin:36px 0 0;
  padding-top:26px;
  border-top:1px solid var(--se-line);
}
.se-authorbox__label{
  display:block;
  margin:0 0 16px;
  font-family:var(--se-font-head);
  font-size:.6875rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--se-ink-faint);
}
.se-authorbox__row{
  display:flex;
  align-items:flex-start;
  gap:18px;
}
.se-authorbox__mark{
  flex:none;
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  background:var(--se-blue-soft);
  color:var(--se-navy);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--se-font-head);
  font-size:1.125rem;
  font-weight:800;
}
.se-authorbox__img{
  width:56px;
  height:56px;
  object-fit:cover;
  display:block;
}
.se-authorbox__body{min-width:0}
.se-authorbox__name{
  margin:0 0 6px;
  font-family:var(--se-font-head);
  font-size:1.0625rem;
  font-weight:700;
  color:var(--se-navy);
}
.se-authorbox__role{
  display:block;
  margin-top:2px;
  font-family:var(--se-font-body);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--se-orange-ink);
}
.se-authorbox__bio{
  margin:0;
  max-width:62ch;
  font-size:.9375rem;
  line-height:1.62;
  color:var(--se-ink-soft);
}
.se-authorbox > p:last-child{
  margin:14px 0 0;
  font-size:.8125rem;
  color:var(--se-ink-faint);
}

@media (max-width:560px){
  .se-authorbox__row{gap:14px}
  .se-authorbox__mark,.se-authorbox__img{width:46px;height:46px}
  .se-authorbox__mark{font-size:1rem}
}