/*
Theme Name: Floss and Fern
Theme URI: https://flossandfern.com
Author: Floss and Fern
Description: Custom child theme for Floss and Fern based on GeneratePress. Warm crafty design with DM Serif Display headings.
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flossandfern
*/

:root {
  --ff-primary: #C06B7E;
  --ff-primary-dark: #8F4457;
  --ff-navy: #C06B7E;
  --ff-navy-dark: #8F4457;
  --ff-blue: #E8C4CE;
  --ff-blue-soft: #F9E4EA;
  --ff-pink: #E5A86B;
  --ff-pink-soft: #FDEEF3;
  --ff-cream: #FFF8F6;
  --ff-cream-deep: #F7E3E8;
  --ff-yellow: #E5A86B;
  --ff-sage: #B08D9A;
  --ff-text: #5C4A52;
  --ff-dark: #3E2A32;
  --ff-border: #F0D5DC;
  --ff-white: #ffffff;
}

/* ---------- Base ---------- */
body {
  color: var(--ff-text);
  background: var(--ff-white);
}

a { color: var(--ff-navy); }
a:hover { color: var(--ff-pink); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6,
.site-title, .site-title a {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  color: var(--ff-navy);
  letter-spacing: 0;
}

.entry-title, .entry-title a { color: var(--ff-navy); }
.entry-title a:hover { color: var(--ff-pink); }

/* ---------- Header ---------- */
.site-header {
  background: var(--ff-white);
  border-bottom: 1px solid var(--ff-border);
}
.site-title a { color: var(--ff-navy); text-decoration: none; }
.site-description { color: var(--ff-text); }

/* ---------- Navigation ---------- */
.main-navigation {
  background: var(--ff-white);
}
.main-navigation .main-nav ul li a {
  color: var(--ff-dark);
  font-weight: 500;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a {
  color: var(--ff-pink);
}

/* ---------- Buttons ---------- */
.button,
.wp-block-button__link,
input[type="submit"],
.woocommerce a.button {
  font-family: 'DM Serif Display', Georgia, serif;
  background: var(--ff-navy);
  color: var(--ff-white) !important;
  border: none;
  border-radius: 999px;
  padding: 14px 34px;
  font-size: 1.05rem;
  text-decoration: none;
  display: inline-block;
  transition: background .2s ease, transform .2s ease;
}
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
  background: var(--ff-pink);
  color: var(--ff-white) !important;
  transform: translateY(-1px);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ff-navy) !important;
  border: 2px solid var(--ff-navy);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--ff-navy);
  color: var(--ff-white) !important;
}

/* ---------- Homepage sections ---------- */
.ff-hero {
  background: var(--ff-cream);
  border-bottom: 1px solid var(--ff-border);
  padding: 80px 20px;
  text-align: center;
}
.ff-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 18px;
}
.ff-hero .ff-eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: .8rem;
  color: var(--ff-pink);
  font-weight: 700;
  margin-bottom: 12px;
}
.ff-hero p.ff-lead {
  font-size: 1.2rem;
  max-width: 640px;
  margin: 0 auto 28px;
  color: var(--ff-text);
}

.ff-section { padding: 70px 20px; }
.ff-section-cream { background: var(--ff-cream); }
.ff-section-pink-soft { background: var(--ff-pink-soft); }
.ff-section-blue-soft { background: var(--ff-blue-soft); }
.ff-section-white { background: var(--ff-white); }

.ff-eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: .78rem;
  color: var(--ff-pink);
  font-weight: 700;
  margin-bottom: 10px;
}
.ff-section h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  margin-bottom: 14px;
}
.ff-narrow { max-width: 720px; margin: 0 auto; text-align: center; }

/* Steps */
.ff-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1000px;
  margin: 36px auto 0;
}
.ff-step {
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: 18px;
  padding: 34px 26px;
  text-align: center;
}
.ff-step-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ff-navy);
  color: var(--ff-white);
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.ff-step h3 { font-size: 1.25rem; margin-bottom: 10px; }

/* Category cards */
.ff-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1080px;
  margin: 36px auto 0;
}
.ff-card {
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ff-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(24,63,114,.10);
}
.ff-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.ff-card-body { padding: 26px 24px 30px; }
.ff-card-body h3 { font-size: 1.3rem; margin-bottom: 10px; }
.ff-card-body h3 a { color: var(--ff-navy); text-decoration: none; }
.ff-card-body h3 a:hover { color: var(--ff-pink); }

/* Post cards on blog/archive */
.post-image img, .post-image-aligned img { border-radius: 14px; }
.inside-article {
  border: 1px solid var(--ff-border);
  border-radius: 18px;
  overflow: hidden;
}
.separate-containers .inside-article { padding: 0; }
.separate-containers .inside-article > *:not(.post-image) {
  padding-left: 34px; padding-right: 34px;
}
.separate-containers .inside-article .entry-header { padding-top: 28px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ff-navy-dark);
  color: #E3D3BC;
}
.site-footer a { color: var(--ff-white); }
.site-footer a:hover { color: var(--ff-pink); }
.site-footer .widget-title,
.site-footer h2, .site-footer h3 { color: var(--ff-white); }
.site-info {
  background: var(--ff-navy);
  color: #E8D0AC;
  font-size: .85rem;
}

/* ---------- Misc ---------- */
blockquote {
  border-left: 4px solid var(--ff-pink);
  background: var(--ff-pink-soft);
  border-radius: 0 12px 12px 0;
  padding: 18px 24px;
  color: var(--ff-dark);
}
.entry-content a { text-decoration: underline; text-decoration-color: var(--ff-pink); text-underline-offset: 3px; }
.entry-content a:hover { color: var(--ff-pink); }

@media (max-width: 820px) {
  .ff-steps, .ff-cards { grid-template-columns: 1fr; }
  .ff-hero { padding: 56px 20px; }
  .ff-section { padding: 50px 20px; }
}

/* ---------- Signature elements (refined to match reference design) ---------- */

/* Multicolour stitch divider strip */
.ff-stitch-divider {
  height: 10px;
  background: repeating-linear-gradient(90deg,
    #C06B7E 0 26px, transparent 26px 36px,
    #E5A86B 36px 62px, transparent 62px 72px,
    #E5A86B 72px 98px, transparent 98px 108px);
}
.site-header::after {
  content: '';
  display: block;
  height: 8px;
  background: repeating-linear-gradient(90deg,
    #C06B7E 0 26px, transparent 26px 36px,
    #E5A86B 36px 62px, transparent 62px 72px,
    #E5A86B 72px 98px, transparent 98px 108px);
}

/* Two-column hero */
.ff-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}
.ff-hero-split > .wp-block-group__inner-container {
  display: contents;
}

.ff-hero-split .ff-hero-text {
  background: var(--ff-cream);
  padding: 70px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.ff-hero-split .ff-hero-text h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  margin-bottom: 18px;
}
.ff-hero-split .ff-hero-img { min-height: 320px; }
.ff-hero-split .ff-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ff-btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.ff-btn-secondary {
  background: var(--ff-white) !important;
  color: var(--ff-navy) !important;
  border: 2px solid var(--ff-navy);
}
.ff-btn-secondary:hover {
  background: var(--ff-navy) !important;
  color: var(--ff-white) !important;
}

/* Four pastel cards */
.ff-pastel-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1120px;
  margin: 36px auto 0;
}
.ff-pastel-card {
  border-radius: 18px;
  padding: 34px 26px;
  text-align: center;
}
.ff-pastel-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.ff-pastel-card p { font-size: .95rem; margin: 0; }
.ff-bg-cream { background: var(--ff-cream-deep); }
.ff-bg-blue { background: var(--ff-blue-soft); }
.ff-bg-pink { background: var(--ff-pink-soft); }
.ff-bg-peach { background: #F5DFC0; }

/* Photo cards with overlapping white labels */
.ff-photo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1080px;
  margin: 44px auto 0;
}
.ff-photo-cards.ff-two { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.ff-photo-card { position: relative; margin-bottom: 30px; }
.ff-photo-card > a > img, .ff-photo-card > img {
  width: 100%; height: 240px;
  object-fit: cover; display: block;
  border-radius: 18px;
}
.ff-photo-cards.ff-two .ff-photo-card > a > img,
.ff-photo-cards.ff-two .ff-photo-card > img { height: 300px; }
.ff-photo-label {
  position: absolute;
  left: 22px; right: 22px; bottom: -26px;
  background: var(--ff-white);
  border-radius: 14px;
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(24,63,114,.10);
}
.ff-photo-label h3 { font-size: 1.15rem; margin: 0 0 6px; }
.ff-photo-label h3 a { color: var(--ff-navy); text-decoration: none; }
.ff-photo-label h3 a:hover { color: var(--ff-pink); }
.ff-photo-label p { font-size: .9rem; margin: 0; }

/* Navy CTA banner */
.ff-cta-navy {
  background: var(--ff-navy);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1080px;
  margin: 0 auto;
}
.ff-cta-navy .ff-cta-text {
  padding: 60px 54px;
  display: flex; flex-direction: column; justify-content: center;
}
.ff-cta-navy h2 { color: var(--ff-white); font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 14px; }
.ff-cta-navy p { color: #E3D3BC; margin-bottom: 24px; }
.ff-cta-navy .button {
  background: var(--ff-white) !important;
  color: var(--ff-navy) !important;
  align-self: flex-start;
}
.ff-cta-navy .button:hover { background: var(--ff-pink) !important; color: var(--ff-white) !important; }
.ff-cta-navy .ff-cta-img { min-height: 280px; }
.ff-cta-navy .ff-cta-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cream feature block */
.ff-feature-cream {
  background: var(--ff-cream);
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  max-width: 1080px;
  margin: 0 auto;
}
.ff-feature-cream .ff-feature-text { padding: 60px 54px; display: flex; flex-direction: column; justify-content: center; }
.ff-feature-cream .ff-feature-img { min-height: 280px; }
.ff-feature-cream .ff-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Footer refinements */
.site-footer { background: var(--ff-blue-soft); color: var(--ff-text); }
.site-footer::before {
  content: '';
  display: block;
  height: 8px;
  background: repeating-linear-gradient(90deg,
    #C06B7E 0 26px, transparent 26px 36px,
    #E5A86B 36px 62px, transparent 62px 72px,
    #E5A86B 72px 98px, transparent 98px 108px);
}
.site-footer a { color: var(--ff-navy); }
.site-footer .widget-title, .site-footer h2, .site-footer h3 { color: var(--ff-navy); }

@media (max-width: 860px) {
  .ff-hero-split, .ff-cta-navy, .ff-feature-cream { grid-template-columns: 1fr; }
  .ff-hero-split .ff-hero-text { padding: 48px 28px; text-align: center; }
  .ff-hero-split .ff-hero-text .ff-btn-row { justify-content: center; }
  .ff-pastel-cards { grid-template-columns: repeat(2, 1fr); }
  .ff-photo-cards, .ff-photo-cards.ff-two { grid-template-columns: 1fr; }
  .ff-cta-navy .ff-cta-text, .ff-feature-cream .ff-feature-text { padding: 40px 28px; }
}
@media (max-width: 560px) {
  .ff-pastel-cards { grid-template-columns: 1fr; }
}

/* ---------- Brand touches ---------- */
::selection { background: #D9A441; color: #fff; }
.site-title a {
  font-size: 1.9rem;
  letter-spacing: .5px;
}
.site-description {
  font-style: italic;
  color: #9C8B6E;
}
/* gold thread accent under centered section headings */
.ff-narrow h2 {
  position: relative;
  padding-bottom: 16px;
}
.ff-narrow h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #D9A441, #D9A441);
}

/* ---------- Sidebar (posts) ---------- */
.sidebar .widget {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: 14px;
  padding: 26px;
  margin-bottom: 26px;
  box-shadow: 0 2px 10px rgba(184,92,56,.05);
}
.sidebar .widget .wp-block-heading,
.sidebar .widget h2 {
  font-size: 1.15rem;
  color: var(--ff-primary);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ff-gold);
}
.sidebar .widget a { color: var(--ff-primary); }
.sidebar .widget a:hover { color: var(--ff-accent); }
.sidebar .widget ul { list-style: none; margin: 0; padding: 0; }
.sidebar .widget ul li { padding: 7px 0; border-bottom: 1px solid var(--ff-cream-deep); }
.sidebar .widget ul li:last-child { border-bottom: none; }

/* ---------- Brand footer ---------- */
.site-footer .footer-widgets {
  background: var(--ff-primary-dark);
  color: #EAD9C2;
  padding: 56px 0 40px;
}
.site-footer .footer-widgets .widget {
  margin-bottom: 0;
}
.site-footer .footer-widgets h3.wp-block-heading,
.site-footer .footer-widgets .widget-title {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ff-gold);
  display: inline-block;
}
.site-footer .footer-widgets a { color: #EAD9C2; }
.site-footer .footer-widgets a:hover { color: var(--ff-gold); }
.site-footer .footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-widgets ul li { padding: 6px 0; }
.site-footer .footer-widgets .wp-block-categories { color: #E8D0AC; }
.site-info {
  background: #2A1E16;
  color: #E8D0AC;
  font-size: .9rem;
  padding: 18px 0;
}

/* ---------- Author profile ---------- */
.ff-author-box {
  display: flex;
  gap: 22px;
  align-items: center;
  background: var(--ff-cream);
  border: 1px solid var(--ff-border);
  border-radius: 16px;
  padding: 28px;
  margin: 40px 0 10px;
}
.ff-author-box-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ff-yellow);
  flex-shrink: 0;
}
.ff-author-box-name {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.3rem;
  color: var(--ff-primary);
  margin-bottom: 8px;
}
.ff-author-box-text p {
  margin: 0;
  color: var(--ff-text);
  font-size: .98rem;
}
.ff-author-photo img {
  border-radius: 50%;
  width: 220px;
  height: 220px;
  object-fit: cover;
  border: 4px solid var(--ff-yellow);
}
.ff-widget-about .wp-block-image img {
  border-radius: 50%;
  width: 110px;
  height: 110px;
  object-fit: cover;
  border: 3px solid var(--ff-yellow);
}
@media (max-width: 600px) {
  .ff-author-box { flex-direction: column; text-align: center; }
}

/* ================= HOMEPAGE (new strategy design) ================= */

/* Kicker labels */
.ff-kicker {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ff-navy-dark);
  margin-bottom: 12px;
}

/* Hero - classic split-screen (text left, full-bleed image right) */
.ff-hero-split .ff-hero-text .ff-kicker {
  margin-bottom: 14px;
}
.ff-hero-split .ff-hero-text p {
  font-size: 1.08rem;
  color: var(--ff-text);
  margin-bottom: 26px;
}
.ff-btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Sections */
.ff-section {
  padding: 70px 0;
}
.ff-narrow {
  max-width: 720px;
  margin: 0 auto 40px;
}
.ff-narrow h2 {
  font-size: 2rem;
  color: var(--ff-primary);
}

/* Category cards grid - 2 rows of 5 */
.wp-block-columns.ff-cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.wp-block-columns.ff-cat-grid > .wp-block-column {
  margin-left: 0 !important;
  margin-top: 0 !important;
  width: auto !important;
  flex: none !important;
  flex-basis: auto !important;
  max-width: none !important;
}
.ff-card {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: 16px;
  padding: 26px 22px;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.ff-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(143,66,38,.12);
}
.ff-card h3 {
  font-size: 1.1rem;
  color: var(--ff-primary);
  margin: 0 0 10px;
}
.ff-card p {
  font-size: .93rem;
  color: var(--ff-text);
  flex-grow: 1;
  margin-bottom: 16px;
}
.ff-card .ff-btn {
  align-self: flex-start;
}
.ff-bg-cream { background: var(--ff-cream); }
.ff-bg-blue { background: var(--ff-blue-soft); }
.ff-bg-pink { background: var(--ff-pink-soft); }
.ff-bg-peach { background: #F5DFC0; }
.ff-bg-blue-soft { background: var(--ff-blue-soft); }

/* Buttons */
.ff-btn .wp-block-button__link,
a.ff-btn {
  display: inline-block;
  background: var(--ff-primary);
  color: #fff;
  padding: 13px 28px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
  border: 2px solid var(--ff-primary);
}
.ff-btn .wp-block-button__link:hover,
a.ff-btn:hover {
  background: var(--ff-navy-dark);
  border-color: var(--ff-navy-dark);
  color: #fff;
  transform: translateY(-2px);
}
.ff-btn-outline .wp-block-button__link,
a.ff-btn-outline {
  background: transparent;
  color: var(--ff-primary);
  border: 2px solid var(--ff-primary);
}
.ff-btn-outline .wp-block-button__link:hover,
a.ff-btn-outline:hover {
  background: var(--ff-primary);
  color: #fff;
}

/* CTA banner */
.ff-cta-navy {
  background: var(--ff-primary-dark);
  color: #fff;
  padding: 70px 0;
  border-radius: 0;
}
.ff-cta-navy h2 {
  color: #fff;
  font-size: 2rem;
}
.ff-cta-navy p {
  color: #EAD9C2;
  font-size: 1.08rem;
}
.ff-cta-navy .ff-btn .wp-block-button__link {
  background: var(--ff-yellow);
  border-color: var(--ff-yellow);
}
.ff-cta-navy .ff-btn .wp-block-button__link:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ff-primary-dark);
}

/* Start Here 3-col */
.ff-section .wp-block-columns:not(.ff-cat-grid) {
  gap: 24px;
}

/* Author photo */
.ff-author-photo img {
  border-radius: 50%;
  width: 220px;
  height: 220px;
  object-fit: cover;
  border: 4px solid var(--ff-yellow);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .wp-block-columns.ff-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .ff-hero-split .ff-btn-row { justify-content: center; }
  .wp-block-columns.ff-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .ff-section { padding: 50px 0; }
  .ff-narrow h2 { font-size: 1.7rem; }
  .ff-cta-navy { padding: 50px 0; }
  .ff-cta-navy h2 { font-size: 1.7rem; }
}
@media (max-width: 520px) {
  .wp-block-columns.ff-cat-grid { grid-template-columns: 1fr; }
  .ff-hero-split h1 { font-size: 1.9rem; }
  .ff-card { padding: 22px 18px; }
  .ff-narrow h2 { font-size: 1.5rem; }
}

/* Hide theme page title on homepage - hero has its own headline */
.home .entry-title,
.home .page-header {
  display: none;
}

/* ================= PHOTO MOSAIC (original) ================= */
.ff-explore {
  padding-top: 20px;
}
.ff-explore-panel {
  background: var(--ff-pink-soft);
  border-radius: 32px;
  padding: 64px 48px;
  position: relative;
  overflow: hidden;
}
/* decorative dashed thread circles */
.ff-explore-panel::before,
.ff-explore-panel::after {
  content: '';
  position: absolute;
  border: 2px dashed var(--ff-yellow);
  border-radius: 50%;
  opacity: .45;
  pointer-events: none;
}
.ff-explore-panel::before {
  width: 190px; height: 190px;
  top: -70px; right: -50px;
}
.ff-explore-panel::after {
  width: 130px; height: 130px;
  bottom: -50px; left: -40px;
  border-color: var(--ff-primary);
}
.ff-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  position: relative;
  z-index: 1;
}
.ff-photo-card {
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 10px 34px rgba(143,66,38,.10);
  transition: transform .3s ease, box-shadow .3s ease;
  min-height: 340px;
}
.ff-photo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(143,66,38,.16);
}
.ff-photo-card-img {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
.ff-photo-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.ff-photo-card:hover .ff-photo-card-img img {
  transform: scale(1.05);
}
.ff-photo-card-label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 16px;
  padding: 16px 20px;
}
.ff-photo-card-label strong {
  display: block;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.25rem;
  color: var(--ff-primary);
  font-weight: 400;
}
.ff-photo-card-label em {
  display: block;
  font-style: normal;
  font-size: .88rem;
  color: var(--ff-text);
}
.ff-photo-card-label .ff-arrow {
  margin-left: auto;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ff-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background .25s ease, transform .25s ease;
}
.ff-photo-card:hover .ff-arrow {
  background: var(--ff-navy-dark);
  transform: translateX(4px);
}
/* decorative thread ring in hero */
.ff-hero-split {
  position: relative;
}
.ff-hero-split::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px dashed var(--ff-yellow);
  border-radius: 50%;
  opacity: .5;
  bottom: 36px;
  right: 36px;
  pointer-events: none;
}
@media (max-width: 860px) {
  .ff-explore-panel { padding: 44px 24px; border-radius: 24px; }
  .ff-mosaic { grid-template-columns: 1fr; }
  .ff-photo-card { min-height: 300px; }
  .ff-hero-split::after { display: none; }
}

/* ================= SPLIT CTA (Problems & Fixes) ================= */
.ff-cta-navy.ff-cta-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  padding: 0;
  border-radius: 32px;
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 20px;
}
.ff-cta-navy.ff-cta-split > .wp-block-group__inner-container {
  display: contents;
}
.ff-cta-split-img {
  min-height: 380px;
  position: relative;
}
.ff-cta-split-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ff-cta-split-text {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ff-cta-split-text .ff-kicker-light {
  color: var(--ff-yellow);
  margin-bottom: 14px;
}
.ff-cta-split-text h2 {
  color: #fff;
  font-size: 2.1rem;
  margin: 0 0 18px;
  line-height: 1.2;
}
.ff-cta-split-text p {
  color: #EAD9C2;
  font-size: 1.08rem;
  margin-bottom: 28px;
}
.ff-cta-split-text p:last-child {
  margin-bottom: 0;
}
.ff-cta-split-text .ff-btn {
  align-self: flex-start;
}
@media (max-width: 860px) {
  .ff-cta-navy.ff-cta-split {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }
  .ff-cta-split-img {
    min-height: 260px;
    position: relative;
  }
  .ff-cta-split-text {
    padding: 44px 28px;
    text-align: center;
    align-items: center;
  }
  .ff-cta-split-text h2 { font-size: 1.7rem; }
  .ff-cta-split-text .ff-btn { align-self: center; }
}

/* Wider homepage content, tighter side margins */
.home .grid-container {
  max-width: 1400px;
}
.home .site-content {
  padding-left: 16px;
  padding-right: 16px;
}
.home .inside-article {
  padding-left: 16px;
  padding-right: 16px;
}
@media (max-width: 600px) {
  .home .site-content,
  .home .inside-article {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Homepage card borders */
.home .ff-card {
  border: 1px solid var(--ff-border);
}
.home .ff-photo-card {
  border: 1px solid var(--ff-border);
}

/* Vertical side borders across the site */
.inside-article {
  border-left: 1px solid var(--ff-border);
  border-right: 1px solid var(--ff-border);
}

/* About section: tighter layout, no dead space */
.wp-block-columns.ff-about-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.wp-block-columns.ff-about-split > .wp-block-column {
  margin: 0 !important;
}
.ff-about-split .ff-author-photo {
}

/* Related posts box below single posts */
.ff-related-box {
  margin: 56px 0 8px;
  padding: 36px 32px;
  background: #F9E4EA;
  border: 1px solid #EFD3DC;
  border-radius: 18px;
}
.ff-related-title {
  text-align: center;
  color: #8F4457;
  font-size: 1.5rem;
  margin: 0 0 24px;
}
.ff-related-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: #E5A86B;
  border-radius: 2px;
  margin: 12px auto 0;
}
  margin: 0;
  text-align: center;
@media (max-width: 700px) {
  .ff-related-grid {
    grid-template-columns: 1fr;
  }
  .ff-related-box {
    padding: 28px 20px;
  }
}
.single-post .entry-meta {
  display: none;
}

  display: none;
}
}
@media (max-width: 700px) {
  .wp-block-columns.ff-about-split {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .ff-about-split .ff-btn-row,
  .ff-about-split .wp-block-buttons {
    justify-content: center;
  }
}