/* Penny Brohn — the self-help resource hub.

   The design system carries everything the single resource page needs
   (.resource-head, .resource-media, .res-format--*, .review-meta,
   .recipe-facts, .resource-download, .resource-outbound, .media-embed,
   .media-audio, .article-body, .share-bar). It carries none of the hub
   card: .resource-card, .rc-img, .rc-body, .fmt-badge and the rest exist
   only as page CSS inside the design file, so they are restated here.

   The toolbar, search pill, chips, pagination and the wide featured card
   are shared with the news templates and stay in css/pb-templates.css.

   Typography follows the ruling rather than the design file, which
   predates it: the card title in Flink ExtraBold, the summary under it in
   Mackinac, the "Watch" link and the badge in Flink.

   Overrides of a design-system rule double their class, because the
   runtime emits every base rule as `.x, .fl-ds-block .x, .fl-ds-page .x`
   and fl-ds-page sits on the body. */

.pb-resources{margin:0;}
.resources-count{font-family:'Flink',system-ui,Arial,sans-serif;font-size:14px;color:var(--ds-color-navy,#23375A);opacity:.6;margin:0 0 28px;}
.resources-count strong{color:var(--ds-color-navy,#23375A);opacity:1;font-weight:700;}

.resources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;row-gap:48px;}
.resources-grid.pb-cols-2{grid-template-columns:repeat(2,1fr);}
.resources-grid.pb-cols-4{grid-template-columns:repeat(4,1fr);}

/* ---------- The card ---------- */

body .resource-card.resource-card{display:flex;flex-direction:column;background:transparent;color:inherit;text-decoration:none;transition:transform .2s ease;}
.resource-card:hover{transform:translateY(-4px);}
.resource-card:hover .rc-img img{transform:scale(1.04);}
.resource-card:focus-visible{outline:2px solid var(--ds-color-teal,#1E6C82);outline-offset:6px;border-radius:20px;}

.rc-img{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:var(--ds-color-aqua-light,#E4F4F4);margin-bottom:18px;}
.rc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}

.rc-img .fmt-badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 10px;border-radius:50px;background:var(--ds-color-white,#FEFEFE);font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-color-navy,#23375A);box-shadow:0 2px 8px -2px rgba(35,55,90,.22);line-height:1;}
.fmt-badge svg{width:12px;height:12px;flex:0 0 12px;}

/* The design ships four badge colours. The other four formats follow the
   same logic: watchable things take the video colour, downloads take the
   guide colour, an outbound link stays navy. */
.fmt-badge.fmt-video,.fmt-badge.fmt-webinar{color:var(--ds-color-mulberry,#A2436B);}
.fmt-badge.fmt-article{color:var(--ds-color-teal,#1E6C82);}
.fmt-badge.fmt-guide,.fmt-badge.fmt-checklist{color:var(--ds-color-plum,#504B7D);}
.fmt-badge.fmt-audio{color:#B77420;}
.fmt-badge.fmt-recipe{color:#3F7A56;}
.fmt-badge.fmt-link{color:var(--ds-color-navy,#23375A);}

.rc-img .play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.rc-img .play-overlay .play-btn{width:56px;height:56px;border-radius:50%;background:rgba(254,254,254,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px -4px rgba(35,55,90,.35);transition:transform .2s ease;}
.resource-card:hover .play-overlay .play-btn{transform:scale(1.08);}
.rc-img .play-overlay svg{width:18px;height:18px;color:var(--ds-color-navy,#23375A);margin-left:2px;}

.rc-body{display:flex;flex-direction:column;flex:1;padding:0 2px;}
body .resource-card .rc-body h3{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:18px;line-height:1.25;letter-spacing:-.005em;color:var(--ds-color-navy,#23375A);margin:0 0 10px;}
.resource-card:hover .rc-body h3{color:var(--ds-color-teal,#1E6C82);}
body .resource-card .rc-excerpt{font-family:'Mackinac',Georgia,serif;font-size:15px;line-height:1.55;color:var(--ds-color-navy,#23375A);opacity:.78;flex:1;margin:0 0 16px;}
.rc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;}
.rc-tags{display:flex;gap:6px;flex-wrap:wrap;min-width:0;}
.rc-tag{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:700;font-size:11px;letter-spacing:.06em;padding:5px 11px;border-radius:50px;line-height:1;background:var(--ds-color-white,#FEFEFE);color:var(--ds-color-navy,#23375A);opacity:.75;border:1px solid rgba(35,55,90,.16);}
.access-link{font-family:'Flink',system-ui,Arial,sans-serif;font-weight:800;font-size:14px;color:var(--ds-color-teal,#1E6C82);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;}
.resource-card:hover .access-link .arr{transform:translateX(4px);}
.access-link .arr{transition:transform .15s ease;}

/* ---------- The wide featured card, when it holds a resource ---------- */

.featured-card.resource-featured .img-wrap{position:relative;}
.featured-card.resource-featured .fmt-badge{position:absolute;top:18px;left:18px;}

/* A featured band can hold more than one. Alternating the picture side stops
   two stacked cards reading as one repeated block. */
.featured-stack{display:flex;flex-direction:column;gap:28px;margin-bottom:48px;}
.featured-stack .featured-card{margin-bottom:0;}
.featured-card.featured-card--flip{grid-template-columns:1fr 1.15fr;}
.featured-card.featured-card--flip .img-wrap{order:2;}
.featured-card.featured-card--flip .body{order:1;}

/* ---------- Narrower screens ---------- */

@media (max-width:980px){
	.resources-grid,
	.resources-grid.pb-cols-4{grid-template-columns:repeat(2,1fr);}
	.featured-card.featured-card--flip{grid-template-columns:1fr;}
	.featured-card.featured-card--flip .img-wrap{order:1;}
	.featured-card.featured-card--flip .body{order:2;}
}
@media (max-width:680px){
	.resources-grid,
	.resources-grid.pb-cols-2,
	.resources-grid.pb-cols-4{grid-template-columns:1fr;}
	.rc-foot{flex-wrap:wrap;}
}

/* ---------- Two alignments the design file left crossed ---------- */

/* The card's rule is its own bottom border, which sat 1px under the footer and
   48px from the next row, so it underlined the chip instead of closing the
   card. */
body .resource-card.resource-card {
	padding-bottom: 22px;
}

/* Head, media and share all sit in a 900px wrap, giving an 820px column. The
   body was the exception: its wrap stayed at the container width and only the
   inner .article-body was capped at 900, so the running text ran 80px wider
   than the page title above it and than the download card. Cap the wrap and
   every band lines up. */
.resource-body .wrap,
.fl-ds-page .resource-body .wrap {
	max-width: 900px;
}